@font-face {
  font-family: 'Noto Sans SC';
  src: url('fonts/NotoSansSC-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Noto Sans SC', sans-serif;
}

/* Make hanzi characters larger in passages */
.hanzi {
  font-size: 1.75em;
  font-weight: 500;
}

/* Container for dialogue content - no font-size override to avoid doubling */
.dialogue-content {
  /* Container styling without font-size changes */
  display: inline-block;
  vertical-align: top;
}

/* Kindle-safe inline layout for dialogues */
.hard-lines .flex {
  /* No flex for Kindle compatibility */
}

.hard-lines .actor {
  display: inline-block;
  vertical-align: top;
  margin-top: 0;
}

.hard-lines .dialogue-content {
  display: inline-block;
  vertical-align: top;
}

.english{
  font-size: 1.2em;
  color: #7f8c8d; /* Gray color for English text */
  line-height: 2em;
  vertical-align: baseline;
}

/* Legacy segment container - being replaced by ruby system */
.segment-container {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 0.2em;
  text-align: center;
}

.passage-display {
  display: inline-block;
}

.pinyin {
  font-size: 0.8em;
  color: #666;
  font-weight: normal;
  white-space: nowrap;
  order: -1; /* Place pinyin above hanzi */
  line-height: 1.2;
  margin-bottom: 0.1em;
  min-height: 1em; /* Always reserve space for pinyin line */
}

.segment-translation {
  font-size: 0.5em;
  color: #888;
  font-weight: normal;
  white-space: nowrap;
  order: 1; /* Place translation below hanzi */
  line-height: 1.2;
  margin-top: 0.1em;
  min-height: 1em; /* Always reserve space for translation line */
  font-style: italic;
}

/* Larger segment translations in polite expressions, collocations, and sentence frames */
.polite-expressions .segment-translation,
.common-collocations .segment-translation,
.sentence-frames .segment-translation,
.bordered-chunk .segment-translation,
.compact-chunk-item .segment-translation {
  font-size: 1em; /* Double size from 0.5em */
}

.hanzi-group {
  display: inline-block;
  vertical-align: baseline;
}

.easy-word {
  display: inline;
}

/* Additional styling for inline Chinese text with pinyin in writing exercises */
.chinese-inline-with-pinyin .segment-container {
  margin-right: 0.5em;
  margin-bottom: 0.2em;
}

.chinese-inline-with-pinyin .hanzi {
  font-size: 1.2em;
}

.chinese-inline-with-pinyin .pinyin {
  font-size: 0.7em;
}

/* Passage translation styling - flexbox layout */
.passage-translation {
  display: block;
  font-size: 1em;
  color: #555;
  font-style: italic;
  text-align: center;
}

/* Words container and individual word boxes - Kindle compatible */
.words-container {
  text-align: left;
}

.word-box {
  display: inline-block;
  vertical-align: top;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.4em;
  margin: 0.2em;
  background: #fafafa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  min-width: 10em;
  text-align: center;
}

/* Reduce font size for translations in words section */
.word-box .passage-translation,
.words-container .passage-translation {
  font-size: 0.8em;
}

/* Specific styling for words section */
.words-section-box {
  padding: 0.4em;
  font-size: 0.8em;
  min-width: 6em;
}

.words-section-box .hanzi {
  font-size: 2.5em; /* Override the 0.8em scaling to get back to ~2em effective size */
}

.words-section-box .word-content {
  text-align: center;
}

.words-section-box .word-pinyin {
  order: 1;
  margin-bottom: 0.2em;
}

.words-section-box .word-hanzi {
  order: 2;
  margin-bottom: 0.2em;
}

.words-section-box .word-definition {
  order: 3;
  margin-top: 0.2em;
  max-width: 14em;
  font-size: 0.75em;
}

.word-box.english-word {
  border-color: #ccc;
  background: #f5f5f5;
  min-width: unset;
  padding: 0.4em 0.6em;
  align-self: flex-end;
  justify-content: center;
}


.word-content {
  text-align: center;
}

/* Styling for nested slot children */
.slot-children-container {
  margin-top: 0.5em;
  margin-left: 1em;
  border-left: 2px solid #ddd;
  padding-left: 0.5em;
}

.slot-child {
  border-color: #c0c0c0 !important;
  background: #f0f0f0 !important;
  font-size: 0.9em;
  min-width: 8em !important;
}

.slot-grandchildren-container {
  margin-top: 0.3em;
  margin-left: 0.8em;
  border-left: 2px solid #bbb;
  padding-left: 0.4em;
}

.slot-grandchild {
  border-color: #a0a0a0 !important;
  background: #e8e8e8 !important;
  font-size: 0.8em;
  min-width: 6em !important;
}

.word-pinyin {
  font-size: 1em;
  color: #666;
  font-weight: normal;
  order: 1;
}

.word-hanzi {
  order: 1;
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
}

.word-definition {
  font-size: 0.85em;
  color: #555;
  font-style: normal;
  order: 2;
  margin-top: 0.3em;
  text-align: center;
  /* max-width: 3em; */
  word-wrap: break-word;
}

/* Tone-based color classes for high frequency words */
.tone-1 {
  color: #D7191C; /* First tone - Red */
}

.tone-2 {
  color: #FFB000; /* Second tone - Orange */
}

.tone-3 {
  color: #2CA25F; /* Third tone - Green */
}

.tone-4 {
  color: #1E88E6; /* Fourth tone - Blue */
}

.tone-neutral {
  color: #b3b1b1; /* Neutral tone - Light gray */
}

/* Frequency-based color classes for mid/low frequency words */
.freq-mid {
  color: #7B42F6; /* Medium frequency - Medium-dark purple */
}

.freq-low {
  color: #C39BE7; /* Low frequency - Light purple */
}

/* Style mid/low frequency group header to match analysis-section h3 */
/* Target the group-header within Mid/Low Frequency word groups */
.mid-low-frequency-group .group-header {
  background-color: #f3e5f5;
  border: 1px solid #ba68c8;
  border-radius: 15px;
  padding: 0.5em 1em;
  color: #7b1fa2;
}

/* Known Vocabulary group styles */
.known-vocabulary-group {
  display: block;
  margin-top: 1em;
}

.known-vocabulary-group .group-header {
  background-color: #e8f5e9;
  border: 1px solid #66bb6a;
  border-radius: 15px;
  padding: 0.5em 1em;
  color: #2e7d32;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 1em;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.toggle-known-btn {
  background: #66bb6a;
  color: white;
  border: none;
  padding: 0.3em 0.8em;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: normal;
  transition: background 0.2s;
}

.toggle-known-btn:hover {
  background: #4caf50;
}

/* Known vocabulary controls */
.known-vocabulary-controls {
  margin: 1em 0;
  text-align: center;
}

.show-known-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 0.5em 1em;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.3s;
}

.show-known-btn:hover {
  background-color: #45a049;
}

/* Character links styling */
a.character-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.character-link:hover {
  background-color: #bdc9c9;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  box-shadow: 0 0 0 2px #bdc9c9;
}

/* Ensure links inside ruby rb don't affect annotations */
ruby rb a.character-link {
  display: inline;
  vertical-align: baseline;
}

/* Phrase color classes with direct hex values for Kindle compatibility */
.phrase-1 {
  color: #FF6B6B; /* Red */
}

.phrase-2 {
  color: #4ECDC4; /* Teal */
}

.phrase-3 {
  color: #45B7D1; /* Blue */
}

.phrase-4 {
  color: #96CEB4; /* Green */
}

.phrase-5 {
  color: #FFEAA7; /* Yellow */
}

.phrase-6 {
  color: #DDA0DD; /* Plum */
}

.phrase-7 {
  color: #98D8C8; /* Mint */
}

.phrase-8 {
  color: #F7DC6F; /* Light yellow */
}

/* Phrase underlining */
.phrase-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Phrase grouping */
.phrase-group {
  display: inline;
}

.phrase-meta{
  margin-bottom: 0.3em;
  padding-left: 0.3em;
  font-size: 1.2em;
}

.phrase-text{
  font-size: 1.25em;
}

/* Phrase sentence container */
.phrase-sentence {
  margin-bottom: 1em;
  padding: 1em;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 4px solid #ddd;
  font-size: 1.25em;
}

/* Structure examples container */
.structure-examples {
  margin-top: 1em;
}

.structure-examples .examples-label {
  font-weight: bold;
  margin-bottom: 0.8em;
  color: #2c3e50;
  font-size: 1.1em;
}

/* Individual example item - add more space between examples */
.example-item {
  margin-bottom: 1.5em; /* Increased spacing between examples */
  padding: 0.8em 0.8em 1.6em 0.8em;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #ddd;
  font-size: 1.2em
}

/* Last example item has no bottom margin */
.example-item:last-child {
  margin-bottom: 0;
}

/* Make translation text larger for structure examples */
.example-item .passage-translation {
  font-size: 0.5em; /* Increased from default 0.5em */
  font-weight: 500;
  color: #2c3e50;
}

/* Alternatives container */
.alternatives-container {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

.alternatives-header h4 {
  color: #2c3e50;
  font-size: 1.2em;
  margin-bottom: 1em;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 0.5em;
}

/* Individual alternative item */
.alternative-item {
  margin-bottom: 1.5em;
  padding: 1em;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alternative-item:last-child {
  margin-bottom: 0;
}

/* Alternative sentence display */
.alternative-sentence {
  margin-bottom: 0.8em;
  font-size: 1.3em;
}

.alternative-sentence .passage-translation {
  font-size: 1em;
  color: #2c3e50;
}

/* Alternative explanation */
.alternative-explanation {
  padding: 0.6em 0.8em;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border-left: 3px solid #3498db;
  margin-top: 2em
}

.explanation-text {
  font-size: 1.25em;
  color: #34495e;
  font-style: italic;
  line-height: 1.4;
}

/* Empty alternatives styling */
.alternatives-empty {
  margin: 1em 0;
  padding: 1em;
  text-align: center;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px dashed #dee2e6;
}

/* Character page styling */
.character-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 0;
  border-bottom: 2px solid #eee;
}

.frequency-rank {
  text-align: right;
  font-size: 0.75em;
  color: #7f8c8d;
  font-style: italic;
  margin-bottom: 10px;
}

.hanzi-large {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 5em;
  /* font-weight: bold; */
  display: inline-block;
  position: relative;
}

.hanzi-large .tone-neutral {
  color: #b3b1b1 !important; /* Use same light gray as other tone-neutral characters */
}

/* Ensure all tone colors are visible and bold in the large character display */
/* .hanzi-large .tone-1,
.hanzi-large .tone-2,
.hanzi-large .tone-3,
.hanzi-large .tone-4 {
  font-weight: bold;
  font-size: 5em;
} */

.hanzi-large ruby {
  ruby-position: over;
}

.hanzi-large rt.pinyin-large {
  font-size: 0.3em; /* Relative to the 5em hanzi size */
  color: #666;
  font-weight: normal;
}

/* Main character audio button */
.main-character-audio-btn {
  position: absolute;
  left: calc(100% + 15px);
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.main-character-audio-btn:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.main-character-audio-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.main-character-audio-btn.playing {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }
  50% {
    box-shadow: 0 2px 20px rgba(102, 126, 234, 0.6);
  }
  100% {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }
}

.parts-of-speech {
  font-size: 1em;
  color: #888;
  margin-bottom: 0.9em;
  font-weight: 500;
  text-transform: lowercase;
  font-style: italic;
}

.definition {
  font-size: 1.125em;
  color: #333;
  font-style: italic;
}

.grammar-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.grammar-table th {
  background-color: #f8f9fa;
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid #dee2e6;
  font-weight: bold;
}

.grammar-table td {
  padding: 15px 12px;
  vertical-align: top;
  border-bottom: 1px solid #dee2e6;
}

/* Styling for different sections */
.collocations-section,
.contrast-words,
.related-characters,
.examples-section {
  margin-bottom: 30px;
  line-height: 1.8;
}

/* Custom styling for character template sections */
.grammar-pattern .passage-display,
.grammar-meaning .passage-display,
.grammar-example .passage-display {
  display: inline;
}

.collocations-display .segment-container,
.contrast-words-display .segment-container,
.related-characters-display .segment-container {
  margin-right: 0.9em;
  margin-bottom: 0.6em;
}

.examples-display .segment-container {
  margin-right: 0.5em;
}

/* Passage item containers for List[Passage] display */
.passage-item {
  display: block;
  margin-bottom: 1em;
  padding: 0.5em 0;
}

.passage-item:last-child {
  margin-bottom: 0;
}

/* Styling for character property examples */
.examples-subsection {
  margin-top: 1em;
  padding: 0.8em;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #dee2e6;
  order: 3;
}

.examples-subsection h5 {
  margin: 0 0 0.6em 0;
  font-size: 0.9em;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.example-item {
  margin-bottom: 0.8em;
  padding: 0.4em 0;
  border-bottom: 1px solid #e9ecef;
}

.example-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

/* Specific styling for different example types */
.collocation-example-display .segment-container,
.contrast-example-display .segment-container,
.related-example-display .segment-container {
  margin-right: 0.5em;
}

/* Reading analysis line header styles */
.line-header {
  margin-bottom: 0.5em;
  font-weight: 600;
}

/* Actor tag bubble styles */
.actor {
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 20px;
  padding: 0.4em 0.8em;
  font-size: 0.9em;
  font-weight: 600;
  color: #1565c0;
  display: inline-block;
  margin-right: 0.8em;
  margin-top: 0;
  white-space: nowrap;
  vertical-align: top;
}

/* Smaller actor bubbles for Reading Hard, Reading Easy, and Speaking Practice */
.hard-lines .actor {
  font-size: 0.75em;
  padding: 0.2em 0.5em;
  /* Keep margin-right: 0.8em from parent */
}

/* Make dialogue lines clickable (but not links within them) */
.dialogue-line-audio {
  cursor: pointer;
  margin-bottom: 10px;
}

.dialogue-line-audio a {
  cursor: pointer; /* Keep default pointer for links */
}

/* Line audio play button styling */
.line-audio-btn {
  background: none;
  border: 1px solid #007bff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #007bff;
  font-size: 12px;
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.line-audio-btn:hover {
  background-color: #007bff;
  color: white;
  transform: scale(1.1);
}

.line-audio-btn:active {
  transform: scale(0.95);
}

.line-audio-btn .play-icon {
  display: inline-block;
  line-height: 1;
}

/* Show button on hover or when playing */
.dialogue-line-audio:hover .line-audio-btn,
.dialogue-line-audio.audio-playing .line-audio-btn {
  opacity: 1;
  visibility: visible;
}

/* When line is playing, highlight the button */
.dialogue-line-audio.audio-playing .line-audio-btn {
  background-color: #007bff;
  color: white;
  opacity: 1;
  visibility: visible;
}

/* Highlight playing dialogue line */
.dialogue-line-audio.audio-playing {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  padding-left: 8px;

}

/* Highlight line selected via long press */
.dialogue-line-audio.long-press-selected {
  background-color: rgba(138, 180, 248, 0.15);
  border-left: 4px solid #8ab4f8;
  padding-left: 8px;

}

/* Show breakdown for long-pressed line */
.dialogue-line-audio.long-press-selected .inline-structures-container {
  display: block !important;
  margin-top: 15px;
  animation: fadeIn 0.2s ease-in;
}

/* Ensure breakdown sentence display is relatively positioned for audio button */
.dialogue-line-audio.long-press-selected .breakdown-sentence-display {
  position: relative;
}

/* In Translation mode, make breakdown words span full width of the line */
.reading-mode-content[data-mode="translate"] .dialogue-line-audio.long-press-selected .breakdown-line-words,
.reading-mode-content[data-mode="translate"] .dialogue-line-audio .breakdown-line-words {
  width: 100% !important;
  display: block !important;
}

/* Hide the original dialogue content when showing breakdown */
.dialogue-line-audio.long-press-selected > .flex {
  display: none !important;
}

/* Hide passage translation and separator in long-pressed lines */
.dialogue-line-audio.long-press-selected .passage-translation,
.dialogue-line-audio.long-press-selected .separator {
  display: none !important;
}

/* Override grid layout for long-pressed lines in side-by-side mode */
.reading-mode-content.layout-side-by-side .dialogue-line-audio.long-press-selected {
  display: block !important;
}

.reading-mode-content.layout-side-by-side .dialogue-line-audio.long-press-selected .inline-structures-container {
  grid-column: 1 / -1;  /* Span all columns if in grid context */
  width: 100%;
}

/* Ensure breakdown passage display uses full width in side-by-side mode */
.reading-mode-content.layout-side-by-side .dialogue-line-audio.long-press-selected .breakdown-line-words {
  width: 100%;
  display: inline-block;
}

/* Keep words inline in breakdown for side-by-side mode */
.reading-mode-content.layout-side-by-side .dialogue-line-audio.long-press-selected .breakdown-line-words .w {
  display: inline-block;
  margin-right: 8px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Floating Play Button */
.floating-play-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.floating-play-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.floating-play-btn:active {
  transform: scale(0.95);
}

.floating-play-btn .play-icon {
  display: inline-block;
  line-height: 1;
  margin-left: 2px; /* Slight offset to center play icon visually */
}

.floating-play-btn.playing {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.floating-play-btn.playing .play-icon {
  margin-left: 0; /* No offset for pause icon */
}

/* Apply same inline layout to easy-lines (reading-analysis) */
.easy-lines .flex {
  /* No flex for Kindle compatibility */
}

.easy-lines .actor {
  display: inline-block;
  vertical-align: top;
  margin-top: 0;
  font-size: 0.85em;
  padding: 0.5em 1em;
}

.easy-lines .dialogue-content {
  display: inline-block;
  vertical-align: top;
}

/* Allow wrapping for segment translations in reading-analysis */
.easy-lines .def {
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words if needed */
  max-width: 100px; /* Limit width to force wrapping */
  line-height: 1.2; /* Tighter line spacing for wrapped text */
}

.actor-a {
  background-color: #e8f5e8;
  border-color: #81c784;
  color: #2e7d32;
}

.actor-b {
  background-color: #fff3e0;
  border-color: #ffb74d;
  color: #ef6c00;
}

/* Analysis section header tag bubbles */
.analysis-section h3 {
  background-color: #f3e5f5;
  border: 1px solid #ba68c8;
  border-radius: 15px;
  padding: 0.5em 1em;
  font-size: 0.85em;
  font-weight: 600;
  color: #7b1fa2;
  display: inline-block;
  margin: 1em 0;
}

/* Key Grammatical Patterns section - match structure colors */
.grammar-patterns-section h3 {
  background-color: #e1f5fe;
  border: 1px solid #4fc3f7;
  color: #0277bd;
}

.grammar-patterns-section .bordered-chunk {
  border-left-color: #4fc3f7;
}

/* Words section header - match structure colors */
.words-analysis h3 {
  background-color: #e1f5fe;
  border: 1px solid #4fc3f7;
  color: #0277bd;
}

/* Remove indentation - all sections should be level */
/* .analysis-section > *:not(h3) {
  margin-left: 4em;
} */

/* Structure header tag bubble */
.structure-header {
  margin-left: 0; /* Align with content */
}

.slot-header {
  display: block;
  font-weight: 600;
  color: #495057;
  font-size: 0.65em;
  margin-bottom: 0.1em;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

.structure-header strong {
  background-color: #e1f5fe;
  border: 1px solid #4fc3f7;
  border-radius: 15px;
  padding: 0.5em 1em;
  font-size: 0.85em;
  font-weight: 600;
  color: #0277bd;
  display: inline-block;
  margin: 1em 0;
}

/* Structure tree styling with border-left nesting */
.structure-tree {
  margin: 0.5em 0; /* Halved from 1em */
  text-align: left;
}

/* Container for structure slots to ensure left alignment */
.structure-slots-container {
  display: block;
  width: 100%;
  text-align: left;
  clear: both;
  /* margin-top: 0.25em; /* Reduced gap between containers */
  margin-bottom: 0.25em;
}

/* Reduce br spacing in structures */
.structure-root br {
  line-height: 0.2; /* Half the normal line height */
}

.structure-root {
  display: block;
  text-align: left;
  width: 100%;
  /* background: #f8f9fa; */
  /* border: 1px solid #e9ecef; */
  /* border-radius: 6px; */
  /* padding: 0.6em; */
}

.structure-title {
  margin: 0 0 0.6em 0;
  font-size: 1em;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.structure-slot-level1 {
  display: inline-block;
  margin-right: 0.6em;
  margin-bottom: 0.3em;
  padding: 0.2em 0.4em;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
  border-left: 4px solid #3498db;
  vertical-align: top;
  white-space: normal;
  line-height: 1.2;
}

.structure-slot-level1:last-child {
  margin-right: 0;
}

.structure-slot-level2 {
  display: inline-block;
  margin-right: 0.5em;
  margin-top: 0.2em;
  padding: 0.15em 0.3em;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  border-left: 3px solid #27ae60;
  vertical-align: top;
  white-space: normal;
  line-height: 1.2;
}

.structure-slot-level2:last-child {
  margin-right: 0;
}

.structure-slot-level3 {
  display: none; /* Hide level 3 - only show 1 level deep */
}

.structure-slot-level3:last-child {
  margin-right: 0;
}

.slot-header {
  font-weight: 600;
  color: #495057;
  font-size: 0.8em;
  margin-bottom: 0.3em;
  text-align: center;
}

.slot-content {
  display: block;
}

.structure-passage {
  margin: 0;
}

.slot-translation {
  color: #7f8c8d;
  font-style: italic;
  font-size: 0.65em;
  text-align: center;
  margin-top: 0.2em;
  max-width: 10em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Example translations in character pages - matching inline-definition style */
.example-translation {
  color: #666;
  font-style: italic;
  font-size: 0.9em;
  margin-left: 0.5em;
  display: inline;
}

/* Structure segment translations */
.structure-segment-translations {
  font-size: 0.9em;
  color: #555;
  margin: 0.5em 0 1em 0;
  text-align: center;
  font-style: italic;
}

/* Page break before reading-hard section */
.reading-hard-header {
  page-break-before: always;
  break-before: always;
}

/* Wordlist styling - using float for Kindle */
/* Legacy wordlist-item - replaced by .wordlist-bubble */
.wordlist-item {
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.8em;
  text-align: center;
}

/* New wordlist bubble styling - inherits from .w class but with additional spacing */
.wordlist-bubble {
  /* These override the .w defaults for better wordlist spacing */
  margin: 0 0.5em 0.8em 0;
  padding: 0.3em;
}

.wordlist-bubble .def {
  display: block;
  font-size: 0.75em;
  color: #666;
  margin-top: 0.3em;
  line-height: 1.2;
}

.wordlist-pinyin {
  font-size: 0.8em;
  color: #666;
  margin-bottom: 0.3em;
}

.wordlist-hanzi {
  margin-bottom: 0.3em;
}

.wordlist-definition {
  color: #7f8c8d;
  font-style: italic;
  font-size: 0.85em;
  margin-top: 0.3em;
}

/* Word group headers (grammar categories) - match structure bubble style */
.group-header {
  display: inline-block;
  background-color: #e1f5fe;
  border: 1px solid #4fc3f7;
  border-radius: 15px;
  padding: 0.5em 1em;  /* Keep original padding */
  font-size: 0.85em;  /* Keep original font size */
  font-weight: 600;
  color: #0277bd;
  margin-right: 0.8em;
  margin-top: 0;
  vertical-align: top;
}

/* Inline wordlist group display */
.word-group {
  margin-bottom: 1em;
}

.word-group .words-container {
  display: inline-block;
  vertical-align: top;
}


/* Compact chunk styling for polite, question, collocation, and sentence frame chunks */
.compact-chunk-item {
  margin-bottom: 0.4em;
  line-height: 1;
}

.bordered-chunk {
  padding: 0.4em 0.6em;
  border-radius: 6px;
  border-left: 3px solid #ba68c8;
  margin-bottom: 0.6em;
}

.bordered-pattern {
  padding: 0.3em 0.5em;
  border-radius: 4px;
  border-left: 2px solid #ba68c8;
  margin-left: 0.5em;
  margin-top: 0.3em;
}

.inline-definition {
  color: #666;
  font-style: italic;
  font-size: 0.9em;
  margin-left: 0.5em;
}

.pattern-importance {
  display: block;
  color: #666;
  font-style: italic;
  font-size: 0.9em;
  margin-bottom: 0.5em;
}

.compact-pattern {
  font-size: 0.85em;
  color: #555;
  margin-top: 0.2em;
  font-style: italic;
}

.compact-example {
  margin-top: 0.3em;
  font-size: 0.95em;
}

.inline-translation {
  color: #7f8c8d;
  font-style: italic;
  font-size: 0.85em;
  margin-left: 0.5em;
}

/* Ruby-based display system for Kindle compatibility */
.w {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 0 0.25em 0.6em 0.25em;
  line-height: 1.2;
}

/* Minimize vertical space in structure containers */
.structure-slot-level1 .w,
.structure-slot-level2 .w {
  margin-bottom: 0.2em;
}

/* Reduce font sizes in structure slots */
.structure-slot-level1 .hanzi,
.structure-slot-level2 .hanzi {
  font-size: 1.4em;
}

.structure-slot-level1 rt,
.structure-slot-level2 rt {
  font-size: 0.6em;
}

.structure-slot-level1 .pinyin,
.structure-slot-level2 .pinyin {
  font-size: 0.7em;
}

ruby {
  ruby-position: over;
}

rt {
  font-size: 0.7em;
  color: #666;
  font-weight: normal;
}

.def {
  display: block; /* Changed to block to enable margin */
  font-size: 0.75em;
  margin-top: 0.15em;
  white-space: nowrap;
  color: #888;
  font-weight: normal;
}

/* Half-size definitions in dialogue line words */
.passage-display .def,
.dialogue-line-words .def {
  font-size: 0.6em; /* Half of 0.75em */
  margin-top: 0.15em; /* Small gap instead of br tag */
;
}

/* Larger definitions in polite expressions, collocations, and sentence frames */
.polite-expressions .def,
.common-collocations .def,
.sentence-frames .def,
.bordered-chunk .def,
.compact-chunk-item .def {
  font-size: 0.75em; /* Double size from 0.75em */
}

.segment-translation-item {
  display: inline-block;
  margin: 0 0.3em;
  padding: 0.2em 0.5em;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* Indent structure content but not the header */
/* .structure-item > *:not(.structure-header) {
  margin-left: 2em;
} */

/* Add spacing between multiple collocation chunks */
.collocation-chunk-item:not(:first-child) {
  margin-top: 1.5em;
}

/* Sentence-level translation for examples */
.sentence-translation {
  font-size: 0.9em;
  color: #666;
  font-style: italic;
  margin-top: 0.3em;
  line-height: 1.4;
}

/* Limit width of contrast and related explanation displays */
.contrast-explanation-display,
.related-explanation-display,
.explanation-definition {
  max-width: 40em;
}

/* Hide segment translations and definitions in structures, show slot translations only for level 1 */
.structure-slot-level1 .segment-translation,
.structure-slot-level2 .segment-translation,
.structure-slot-level3 .segment-translation,
.structure-slot-level2 .slot-translation,
.structure-slot-level3 .slot-translation,
.structure-slot-level1 .def,
.structure-slot-level2 .def,
.structure-slot-level3 .def {
  display: none;
}



/* Kindle/KF8/KFX specific overrides */
@media amzn-kf8, amzn-mobi {
  .no-split {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Group headers - block display and centered for Kindle */
  .group-header {
    display: inline-block !important;
    clear: both !important;
    text-align: center !important;
  }
  
  /* Larger margin-bottom for actor tags in reading-easy and reading-analysis */
  .hard-lines .actor,
  .easy-lines .actor,
  .analysis-lines .actor {
    margin-bottom: 1em !important;
  }

  /* Wordlist chips: keep the simple inline-table approach */
  .wordlist-item,
  .bordered-chunk,
  .bordered-pattern,
  .word-box {
    display: inline-table !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important;
    vertical-align: top !important;
  }
  
  /* Wordlist bubbles use inline-block like dialogue words for proper flow */
  .wordlist-bubble {
    display: inline-block !important;
    width: auto !important;
    margin: 0 0.125em 0.2em 0.125em !important;
    padding: 0.035em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    vertical-align: top !important;
  }

  .wordlist-bubble rt {
    font-size: 0.8em !important;
  }
   .wordlist-bubble .def {
    font-size: 0.8em !important;
    line-height:0.8 !important;
  }
  
  
  /* Reduce sizes for Kindle as well */
  /* .wordlist-bubble .hanzi {
    font-size: 0.44em !important;
    font-weight: 400 !important;
  }
  
  .wordlist-bubble rt {
    font-size: 0.18em !important;
  }
  
  .wordlist-bubble .def {
    font-size: 0.19em !important;
    margin-top: 0.075em !important;
  } */
  
  .wordlist-bubble ruby {
    white-space: nowrap !important;
  }

  /* Use the REAL structure containers from your template */
  .structure-tree,
  .structure-root,
  .structure-slots-container {
    /* display: block !important; */
    overflow: hidden !important; /* establish a BFC */
    /* width: 100% !important; */
    text-align: left !important;
    clear: both !important;
  }
  
  /* Force new lines to start at left edge */
  .structure-slots-container::before {
    content: "";
    display: table;
    clear: both;
  }
  
  .structure-root::after { content:""; display:block; clear:both; }

  /* Float-based chips that shrink to content */
  .structure-slot-level1,
  .structure-slot-level2,
  .structure-slot-level3 {
    /* page-break-inside: avoid;
    break-inside: avoid; */
    float: left !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 .8em .6em 0 !important;
    padding: .3em .5em !important;
    white-space: normal !important;
    text-align: left !important;
    border-radius: 6px !important;
    background: transparent !important;
  }

  /* Left borders per level (horizontal style) */
  .structure-slot-level1 { border-left: 3px solid #3498db !important; }
  .structure-slot-level2 { border-left: 2px solid #27ae60 !important; }
  .structure-slot-level3 { display: none !important; /* Hide level 3 */ }

  /* make inner content inline-table, but leave nested chips alone */
.structure-slot-level1,
.structure-slot-level2,
.structure-slot-level3 
{
  display: inline-table !important;
  white-space: normal !important;
  margin: 0 .3em .6em 0 !important;
  padding: .3em .5em !important;
  text-align: left !important;
}

  /* Prevent individual words from breaking within slots */
  .structure-slot-level1 .w,
  .structure-slot-level2 .w,
  .structure-slot-level1 ruby,
  .structure-slot-level2 ruby,
  .structure-slot-level1 .segment-container,
  .structure-slot-level2 .segment-container {
    white-space: nowrap !important;
    display: inline-block !important;
  }
  
  /* Keep slot content on same line when possible */
  .structure-slot-level1 .slot-content,
  .structure-slot-level2 .slot-content {
    white-space: nowrap !important;
  }
  
  /* Center align ruby elements within structure slots to fix pinyin alignment */
  .structure-slot-level1 .w,
  .structure-slot-level2 .w {
    text-align: center !important;
  }


  /* Kill the inline-blocks that cause stretch - ONLY within structure slots */
  /* .structure-slot-level1 .segment-container,
  .structure-slot-level2 .segment-container,
  .structure-slot-level3 .segment-container,
  .structure-slot-level1 .passage-display,
  .structure-slot-level2 .passage-display,
  .structure-slot-level3 .passage-display,
  .structure-slot-level1 .segment-translation-item,
  .structure-slot-level2 .segment-translation-item,
  .structure-slot-level3 .segment-translation-item { display: inline !important; }

  /* Keep ruby bits simple - ONLY within structure slots */
  /* .structure-slot-level1 .w,
  .structure-slot-level2 .w,
  .structure-slot-level3 .w { display: inline !important; margin: 0 .25em .6em .25em !important; line-height: 1.2 !important; }
  .structure-slot-level1 rt,
  .structure-slot-level2 rt,
  .structure-slot-level3 rt { display: inline !important; }  */

  /* If you truly want to hide lower levels, do it once */
  /* (Otherwise, remove these two lines to show all levels) */
  /* .structure-slot-level2, .structure-slot-level3 { display: none !important; } */
}

/* Tab Navigation Styling */
.tab-navigation {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  background-color: #f5f5f5;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tab-button {
  background-color: transparent;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
  flex: 1;
  text-align: center;
}

.tab-button:hover {
  background-color: #e8e8e8;
  color: #333;
}

.tab-button.active {
  background-color: #fff;
  color: #2196F3;
  font-weight: 600;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #2196F3;
}

/* Tab Content Styling */
.tab-content {
  padding: 0 0, 20px 0;
  min-height: 400px;
}

.tab-panel {
  display: none;
  animation: fadeIn 0.3s ease-in;
}

.tab-panel.active {
  display: block;
}

/* Speaking panel specific styling */
.speaking-panel {
  line-height: 2.5;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Print styles - show all tabs when printing */
@media print {
  .tab-navigation {
    display: none !important;
  }
  
  .tab-panel {
    display: block !important;
    page-break-after: always;
    margin-bottom: 50px;
  }
  
  .tab-panel:last-child {
    page-break-after: auto;
  }
  
  /* Add section headers for print */
  #vocabulary-panel::before {
    content: "New Vocabulary";
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  #reading-hard-panel::before {
    content: "Reading Hard";
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  #reading-easy-panel::before {
    content: "Reading Easy";
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  .speaking-panel::before {
    content: "Speaking";
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  #reading-analysis-panel::before {
    content: "Reading Analysis";
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
}

/* Pinyin Toggle Styles */
.reading-controls {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #dee2e6;
    position: sticky;
    top: 40px; /* Positioned directly against tab navigation (no gap) */
    z-index: 90;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.pinyin-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pinyin-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.pinyin-toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pinyin-toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    background: #ccc;
    border-radius: 13px;
    transition: background-color 0.3s;
    margin-right: 10px;
}

.pinyin-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.pinyin-toggle-checkbox:checked + .pinyin-toggle-switch {
    background: #007bff;
}

.pinyin-toggle-checkbox:checked + .pinyin-toggle-switch::after {
    transform: translateX(24px);
}

.pinyin-toggle-text {
    font-weight: 500;
    color: #333;
}

/* Remove colors when pinyin is hidden */
.segment-container.no-colors .segment-level1,
.segment-container.no-colors .segment-level2,
.segment-container.no-colors .segment-level3,
.segment-container.no-colors .segment-level4 {
    background: none;
    border: none;
    padding: 0;
}

/* Hamburger Menu Styles */
.hamburger-menu {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: background-color 0.3s, opacity 0.3s, visibility 0.3s;
}

.hamburger-menu:hover {
    background: #0056b3;
}

/* Hide hamburger when drawer is open (both mobile and desktop) */
.nav-drawer.open ~ .hamburger-menu,
body.sidebar-visible .hamburger-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hamburger-menu span {
    display: block;
    width: 24px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger-menu.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Navigation Drawer Styles */
.nav-drawer {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: white;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: left 0.3s ease;
    overflow-y: auto;
}

.nav-drawer.open {
    left: 0;
}

.nav-drawer-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-drawer-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.nav-drawer-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-drawer-close:hover {
    color: #000;
}

.nav-drawer-content {
    padding: 10px 0;
}

.dialogue-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dialogue-nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-left: 3px solid transparent;
}

.dialogue-nav-item:hover {
    background: #f8f9fa;
}

.dialogue-nav-item.active {
    background: #e7f3ff !important;
    border-left-color: #007bff !important;
}

/* Role-play feedback coloring for dialogue nav items */
.dialogue-nav-item.feedback-good {
    border-left-color: #28a745; /* green */
    background: #eaf7ef;       /* light green */
    color: #0f5132;            /* dark green text for contrast */
}
.dialogue-nav-item.feedback-good:hover,
.dialogue-nav-item.active.feedback-good:hover {
    background: #dff2e7; /* slightly darker green */
}
.dialogue-nav-item.feedback-fair {
    border-left-color: #ffc107; /* amber */
    background: #fff8e1;        /* light amber */
    color: #664d03;             /* dark amber text */
}
.dialogue-nav-item.feedback-fair:hover,
.dialogue-nav-item.active.feedback-fair:hover {
    background: #ffefb8; /* slightly darker amber */
}
.dialogue-nav-item.feedback-poor {
    border-left-color: #dc3545; /* red */
    background: #fdecea;        /* light red */
    color: #842029;             /* dark red text */
}
.dialogue-nav-item.feedback-poor:hover,
.dialogue-nav-item.active.feedback-poor:hover {
    background: #f8d9d6; /* slightly darker red */
}

/* When active, keep active highlight but preserve feedback border color */
.dialogue-nav-item.active.feedback-good { border-left-color: #28a745; }
.dialogue-nav-item.active.feedback-fair { border-left-color: #ffc107; }
.dialogue-nav-item.active.feedback-poor { border-left-color: #dc3545; }

.dialogue-nav-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #6c757d;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.dialogue-nav-item.active .dialogue-nav-number {
    background: #007bff;
}

.dialogue-nav-text {
    flex: 1;
    min-width: 0;
}

.dialogue-nav-category {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dialogue-nav-topic {
    color: #666;
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drawer Overlay */
.nav-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-drawer-overlay.show {
    display: block;
    opacity: 1;
}

/* Dialogue Container */
.dialogue-container {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Stage Navigation Styles */
.stages-nav-list {
    padding: 0;
}

.stage-nav-group {
    margin-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.stage-nav-group:last-child {
    border-bottom: none;
}

.stage-nav-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-left: 3px solid transparent;
}

.stage-nav-group.current-stage .stage-nav-header {
    background: #e7f3ff;
    border-left-color: #007bff;
}

.stage-nav-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #6c757d;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    margin-right: 10px;
    flex-shrink: 0;
}

.stage-nav-group.current-stage .stage-nav-number {
    background: #007bff;
}

.stage-nav-name {
    font-size: 14px;
}

.stage-nav-group .dialogue-nav-list {
    padding-left: 15px;
}

.stage-nav-group .dialogue-nav-item {
    padding: 8px 15px;
    font-size: 13px;
}

.stage-nav-group .dialogue-nav-number {
    width: 22px;
    height: 22px;
    font-size: 11px;
    margin-right: 10px;
}

.loading-message, .error-message {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.error-message {
    color: #dc3545;
}

/* Adjust main content when drawer is open */
body.drawer-open {
    overflow: hidden;
}

/* Desktop styles - Sidebar mode */
@media (min-width: 1024px) {
    
    /* Navigation drawer as sidebar on desktop */
    .nav-drawer {
        left: 0; /* Show by default */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    }
    
    .nav-drawer.collapsed {
        left: -300px; /* Hide when collapsed */
    }
    
    /* Hide overlay on desktop */
    .nav-drawer-overlay {
        display: none !important;
    }
    
    /* Adjust main content when sidebar is open */
    body {
        transition: margin-left 0.3s ease;
    }
    
    body.sidebar-visible {
        margin-left: 300px;
    }
    
    /* Remove scroll lock on desktop */
    body.drawer-open {
        overflow: auto;
    }
    
    /* Adjust padding-sides content */
    .padding-sides {
        transition: margin-left 0.3s ease;
    }
    
    body.sidebar-visible .padding-sides {
        margin-left: 0; /* Content already shifted by body margin */
    }
    
    /* Stage content adjustments */
    body.sidebar-visible .dialogue-container,
    body.sidebar-visible section {
        max-width: calc(100% - 40px);
        margin: 0 auto;
    }
}

/* Tablet styles - Keep drawer behavior */
@media (min-width: 768px) and (max-width: 1023px) {
    .nav-drawer {
        width: 300px;
    }
}

/* Download Tab Styles */
.download-subsection {
  padding: 20px;
}

.download-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.download-section h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.download-section p {
  margin-bottom: 15px;
  color: #666;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}

.download-btn:hover {
  background: #218838;
  transform: translateY(-2px);
}

.download-btn:active {
  transform: translateY(0);
}

.download-icon {
  font-size: 20px;
}

.individual-downloads {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.line-download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

.line-info {
  flex: 1;
  margin-right: 15px;
  color: #333;
}

.line-download-item .download-btn {
  padding: 8px 16px;
  font-size: 14px;
}

.line-download-item .download-icon {
  font-size: 16px;
}

/* Anki Card Download Styles */
.anki-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 15px;
  /* Do not stretch items vertically so inner buttons keep their own height */
  align-items: start;
}

.download-anki,
.download-character-anki {
  background: #6c757d;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px 20px;
  /* Unify visual height across all anki download buttons */
  min-height: 180px;
  width: 100%;
}

.download-anki:hover,
.download-character-anki:hover {
  background: #5a6268;
}

.anki-description,
.download-description {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 5px;
  font-weight: normal;
}

.anki-note {
  display: block;
  font-size: 11px;
  color: #ffeb3b;
  margin-top: 4px;
  font-style: italic;
  opacity: 0.9;
}

/* Pinyin checkbox styling */
.reading-card-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.reading-card-container .reading-card {
  /* Ensure same height as other buttons by removing any extra padding */
  padding-bottom: 15px !important;
}

.pinyin-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -5px;
  margin-bottom: 10px;
  padding: 6px 12px;
  background: rgba(108, 117, 125, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.pinyin-checkbox-wrapper:hover {
  background: rgba(108, 117, 125, 0.25);
}

.include-pinyin-checkbox {
  margin-right: 6px;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.checkbox-label {
  font-size: 12px;
  color: #666;
  user-select: none;
  font-weight: 500;
}

/* Audio Bundle Download Styles */
.download-audio-bundle {
  background: #17a2b8;
  width: 100%;
  max-width: 400px;
}

.download-audio-bundle:hover {
  background: #138496;
}

.audio-instructions {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-left: 4px solid #17a2b8;
  border-radius: 4px;
}

.audio-instructions small {
  display: block;
  color: #666;
  line-height: 1.6;
  margin-bottom: 3px;
}

.audio-instructions small:first-child {
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

/* Dark mode tweaks for audio instructions */
.dark-mode .audio-instructions {
  background: rgba(255,255,255,0.04);
  border-left-color: #5ca7ff;
}
.dark-mode .audio-instructions small { color: var(--dm-muted); }
.dark-mode .audio-instructions small:first-child { color: var(--dm-text); }

/* Mobile responsive */
@media (max-width: 768px) {
  .tab-navigation {
    flex-wrap: wrap;
    top: 0; /* Ensure it sticks to top on mobile */
  }
  
  
  .reading-controls {
    top: 46px; /* Adjust for potentially smaller tab navigation on mobile */
  }
  
  .tab-button {
    font-size: 12px;
    padding: 10px 12px;
    flex: 1 0 33%;
  }
  
  .line-download-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* Download Menu Styles */
.dialogue-header-container {
  position: relative;
  margin-bottom: 20px;
  padding-right: 100px; /* Make room for both settings and download icons */
}

.dialogue-header-container h2 {
  margin: 0;
}

.settings-trigger {
  position: absolute;
  top: 0;
  right: 50px; /* Position to the left of download button */
  background: #6c757d; /* Gray color for settings */
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.settings-trigger:hover {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.settings-trigger svg {
  width: 20px;
  height: 20px;
}

/* Settings Popover */
.settings-popover {
  position: absolute;
  top: 40px;
  right: 0;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  min-width: 200px;
  display: none;
}

/* Explicit open state to avoid specificity issues in dark mode */
.settings-popover.is-open { display: block; }

.settings-popover-header {
  padding: 10px 15px;
  border-bottom: 1px solid #dee2e6;
  font-weight: 600;
  color: #333;
}

.settings-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.settings-item:hover {
  background-color: #f8f9fa;
}

/* Material-like switch */
.settings-label { flex: 1; }
.settings-switch-input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch {
  position: relative;
  width: 42px;
  height: 24px;
  background: #cfd4da;
  border-radius: 999px;
  transition: background .2s ease;
  flex-shrink: 0;
}
.settings-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .2s ease;
}
.settings-switch-input:checked + .settings-switch { background: #28a745; }
.settings-switch-input:checked + .settings-switch::after { transform: translateX(18px); }

/* Dark mode switch colors */
.dark-mode .settings-switch { background: #4b5563; }
.dark-mode .settings-switch-input:checked + .settings-switch { background: #5ca7ff; }

.download-menu-trigger {
  position: absolute;
  top: 0;
  right: 0;
  background: #007bff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.download-menu-trigger:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.download-menu-trigger svg {
  width: 20px;
  height: 20px;
}

/* Character Download Button */
.character-header-container {
  position: relative;
  margin-bottom: 20px;
}

.character-download-trigger {
  position: absolute;
  top: 0;
  right: 0;
  background: #007bff;
  border: none;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.character-download-trigger:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.character-download-trigger svg {
  width: 20px;
  height: 20px;
}

/* Slide-down Menu (for both dialogue and character) */
.download-slide-menu,
.character-download-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}

.download-slide-menu.active,
.character-download-menu.active {
  pointer-events: auto;
  visibility: visible;
}

.download-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.download-slide-menu.active .download-menu-overlay,
.character-download-menu.active .download-menu-overlay {
  opacity: 1;
}

.download-menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.download-slide-menu.active .download-menu-panel,
.character-download-menu.active .download-menu-panel {
  transform: translateY(0);
}

.download-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 2px solid #f0f0f0;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.download-menu-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.5em;
}

.close-menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.close-menu:hover {
  background: rgba(0, 0, 0, 0.1);
}

.close-menu svg {
  width: 24px;
  height: 24px;
  stroke: #666;
}

.download-menu-content {
  padding: 20px;
}

.download-menu-content .download-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
}

.download-menu-content .download-section:last-child {
  border-bottom: none;
}

/* Removed keyframe animations - using transitions instead */

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .dialogue-header-container {
    padding-right: 90px; /* Space for both buttons on mobile */
  }
  
  .settings-trigger {
    padding: 6px 10px; /* Smaller button on mobile */
    right: 45px; /* Adjust position for mobile */
  }
  
  .settings-trigger svg {
    width: 18px;
    height: 18px;
  }
  
  .download-menu-trigger {
    padding: 6px 10px; /* Smaller button on mobile */
  }
  
  .download-menu-trigger svg {
    width: 18px;
    height: 18px;
  }
  
  .download-menu-panel {
    max-height: 90vh;
  }
  
  .download-menu-content {
    padding: 15px;
  }
  
  .line-download-item .download-btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Full width drawer on mobile */
  .nav-drawer {
    width: 280px;
  }
  
  .nav-drawer.open {
    left: 0;
  }
}

/* Dialogue header styling */
h2 {
  font-size: 1.5em;
  font-weight: 600;
  color: #2c3e50;
  margin: 0.75em 0 1em 70px; /* Add left margin to avoid hamburger menu */
  padding-bottom: 0.5em;
}

/* On desktop when sidebar is visible, reset the margin */
@media (min-width: 1024px) {
  body.sidebar-visible h2 {
    margin-left: 0; /* No need for margin when sidebar is open */
  }
}

/* Complexity indicator styling */
.complexity-indicator {
  display: inline-block;
  margin-left: 1em;
  font-size: 1.2em;
  color: #FFA500;
  vertical-align: middle;
}

.dialogue-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
}

/* .dialogue-meta removed */

/* Translation layout wrapper */
.translation-layout-wrapper {
  position: relative;
  margin-left: auto;
  display: none; /* Hidden by default, shown via JS when in easy mode */
}

/* Translation toggle switch */
.translation-toggle-wrapper {
  display: flex;
  align-items: center;
}

.translate-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.translate-checkbox {
  display: none;
}

.translate-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: #ddd;
  border-radius: 34px;
  transition: background-color 0.3s;
  display: inline-block;
}

.translate-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.translate-checkbox:checked + .translate-slider {
  background: #2563eb;
}

.translate-checkbox:checked + .translate-slider::before {
  transform: translateX(20px);
}

.translate-label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.translation-layout-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  z-index: 1000;
  background: #2b2d30;
  color: #fff;
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  width: 220px;
}

.translation-layout-popover .layout-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.translation-layout-popover .layout-option:hover,
.translation-layout-popover .layout-option.active {
  background: rgba(255,255,255,0.08);
}

.translation-layout-popover .layout-thumb {
  width: 52px;
  height: 26px;
  border-radius: 6px;
  background: #6b6578;
  position: relative;
}

/* Thumbs for layouts */
.layout-thumb.layout-hide::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: #8a8599;
  border-radius: 4px;
}

.layout-thumb.layout-side::before,
.layout-thumb.layout-side::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 20px;
  border-radius: 4px;
  background: #8a8599;
}
.layout-thumb.layout-side::before { left: 4px; }
.layout-thumb.layout-side::after { right: 4px; }

.layout-thumb.layout-structures::before,
.layout-thumb.layout-structures::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 6px;
  border-radius: 2px;
  background: #8a8599;
}
.layout-thumb.layout-structures::before { 
  top: 4px; 
  height: 8px;
}
.layout-thumb.layout-structures::after { 
  bottom: 4px; 
  left: 8px;
  background: #b8b3c4;
}

.layout-label { font-size: 14px; }

/* Speaking Mode - Hide only dialogue content for filtered characters */
.hard-lines.hidden-character .dialogue-content {
  display: none !important;
}

/* Role Play Mode Styles */
.roleplay-start-btn {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.roleplay-start-btn:hover {
  background: #218838;
}

.roleplay-status {
  position: sticky;
  top: 54px; /* Position directly below recording indicator (15px padding * 2 + 12px dot + 12px font) */
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-top: 2px solid #ffc107; /* Match recording indicator border */
  border-radius: 0 0 8px 8px;
  padding: 15px;
  margin: 0 0 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.roleplay-progress {
  flex: 1;
}

.progress-text {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
  display: block;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: #28a745;
  transition: width 0.3s ease;
}

.roleplay-controls {
  display: flex;
  gap: 10px;
  margin-left: 20px;
}

.roleplay-control-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.roleplay-control-btn:hover {
  background: #5a6268;
}

.recording-indicator {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-bottom: none;
  border-radius: 0;
  padding: 15px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  z-index: 1000;
  box-shadow: none;
}

.recording-dot {
  width: 12px;
  height: 12px;
  background: #dc3545;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

.stop-recording-btn {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.stop-recording-btn:hover {
  background: #c82333;
}

.roleplay-active {
  background: #e7f3ff !important;
  border-left: 4px solid #007bff;
  padding-left: 12px;
  margin-left: -16px;
}

/* Inline performance indicators */
.inline-performance {
  background: #f0f8ff;
  border-left: 3px solid #28a745;
  border-radius: 0 5px 5px 0;
  padding: 12px;
  margin: 10px 0 10px 20px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.performance-comparison {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.performance-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}

.performance-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 600;
  white-space: nowrap;
}

.performance-item audio {
  flex: 1;
  height: 32px;
  min-width: 150px;
}

/* Line recorded indicator */
.line-recorded {
  position: relative;
}

.line-recorded::before {
  content: '✓';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  color: #28a745;
  font-weight: bold;
  font-size: 18px;
}

/* Role play completion bar */
.roleplay-results {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to right, #28a745, #20c997);
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 15px 20px;
  margin: 20px -20px 0 -20px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100;
}

.roleplay-completion-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.completion-message {
  color: white;
  font-size: 16px;
  font-weight: 600;
}

/* Formatted Chinese section for role play results */
.formatted-chinese-section {
  padding: 10px 0 10px 40px;
  margin: 8px 0;
  border-left: 2px solid #e0e0e0;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.formatted-chinese-visible {
  display: block !important;
  margin: 0;
}

.formatted-chinese-visible .passage-display {
  font-size: 1.2em;
  line-height: 1.8;
}

/* Ensure pinyin is visible in role play results */
.formatted-chinese-visible ruby rt {
  visibility: visible !important;
  opacity: 1 !important;
}

.result-header {
  margin-bottom: 15px;
}

.result-line {
  font-weight: 600;
  color: #495057;
  display: block;
  margin-bottom: 5px;
}

.result-text {
  color: #6c757d;
  font-size: 14px;
}

.result-text-formatted {
  margin-top: 10px;
  margin-bottom: 5px;
}

.result-text-formatted .passage-display {
  font-size: 1.2em;
  line-height: 1.8;
}

.result-text-formatted .hanzi {
  font-size: 1.3em;
  font-weight: 500;
}

.result-text-formatted ruby {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  vertical-align: bottom;
  margin: 0 1px;
}

.result-text-formatted rt {
  font-size: 0.7em;
  color: #6c757d;
  display: block;
  line-height: 1.2;
  margin-bottom: 2px;
}

.result-text-formatted rb {
  display: block;
  line-height: 1;
}

/* Hide ruby parentheses in results */
.result-text-formatted rp {
  display: none;
}

/* Preserve tone colors in results */
.result-text-formatted .tone-1 {
  color: #D7191C !important;
}

.result-text-formatted .tone-2 {
  color: #FFB000 !important;
}

.result-text-formatted .tone-3 {
  color: #2CA25F !important;
}

.result-text-formatted .tone-4 {
  color: #1E88E6 !important;
}

.result-text-formatted .tone-neutral {
  color: #b3b1b1 !important;
}

/* Reading Mode Selector - 4-way Segmented Button */
.reading-mode-selector {
  display: inline-flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #dee2e6;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mode-btn {
  padding: 10px 20px;
  border: none;
  background: #ffffff;
  color: #495057;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border-right: 1px solid #dee2e6;
  min-width: 100px;
  text-align: center;
}

.mode-btn:last-child {
  border-right: none;
}

.mode-btn:hover {
  background: #f8f9fa;
  color: #212529;
}

.mode-btn.active {
  background: #007bff;
  color: white;
  font-weight: 600;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mode-btn.active:hover {
  background: #0056b3;
}

.mode-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.mode-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.mode-btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.mode-btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Reading mode content containers */
.reading-mode-content {
  animation: fadeIn 0.3s ease;
}

/* Translation layout application for Reading (Easy) */
.reading-mode-content[data-mode="easy"] { position: relative; }
.reading-mode-content.layout-hide .passage-translation { display: none; }

/* Translation layout application for Vocabulary mode */
.reading-mode-content[data-mode="vocabulary"].layout-hide .def {
  display: none;
}

/* Structures layout - hide original display and show breakdown */
.reading-mode-content.layout-structures .dialogue-line-audio > .flex--row { display: none; }
.reading-mode-content.layout-structures .inline-structures-container { 
    display: block !important;
    margin-top: 0;
    position: relative;
}

/* Breakdown sentence display */
.reading-mode-content.layout-structures .breakdown-sentence-display {
    position: relative;
    background: #ffffff;
    border-radius: 4px;
}

/* Make structures look like analysis mode */
.reading-mode-content.layout-structures .hard-lines {
    background: transparent;
    border: none;
    padding: 15px 0;
}

.reading-mode-content.layout-structures .analysis-section {
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}

.reading-mode-content.layout-structures .analysis-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #495057;
    font-size: 16px;
    font-weight: 600;
}
/* Side-by-side: use grid for exact 50/50 split */
.reading-mode-content.layout-side-by-side .hard-lines { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}

/* Keep the entire left side (actor + Chinese) together in left column */
.reading-mode-content.layout-side-by-side .hard-lines .flex { 
    grid-column: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Dialogue content takes remaining space in flex container */
.reading-mode-content.layout-side-by-side .hard-lines .dialogue-content {
    flex: 1;
}

/* Remove word spacing in side-by-side layout for natural sentence flow */
.reading-mode-content.layout-side-by-side .passage-display .w {
    margin: 0;
    display: inline;
}

/* Ensure ruby elements display inline for natural flow */
.reading-mode-content.layout-side-by-side .passage-display ruby {
    display: inline-ruby;
    margin: 0;
}

/* Ensure hanzi characters flow naturally without extra spacing */
.reading-mode-content.layout-side-by-side .passage-display .hanzi {
    margin: 0;
    padding: 0;
}

/* Position translation in the right column */
.reading-mode-content.layout-side-by-side .passage-display .passage-translation { 
    position: absolute;
    left: calc(50% + 15px);
    right: 0;
    top: 0;
    display: block;
    color: #666;
    line-height: 1.8;
    padding-left: 20px;
    border-left: 2px solid #e0e0e0;
    margin: 0;
    text-align: left;
}

/* Make hard-lines relative for absolute positioning */
.reading-mode-content.layout-side-by-side .hard-lines {
    position: relative;
}

/* Tablet size media query for side-by-side layout */
@media (max-width: 768px) {
    /* Keep grid but adjust structure */
    .reading-mode-content.layout-side-by-side .hard-lines { 
        display: block;
        position: relative;
    }
    
    /* Reset flex to block for vertical stacking */
    .reading-mode-content.layout-side-by-side .hard-lines .flex { 
        display: block;
    }
    
    /* Actor and audio button on top line */
    .reading-mode-content.layout-side-by-side .hard-lines .actor {
        display: inline-block;
        margin-bottom: 15px;
        vertical-align: middle;
    }
    
    .reading-mode-content.layout-side-by-side .hard-lines .line-audio-btn {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }
    
    /* Dialogue content maintains relative positioning for side-by-side */
    .reading-mode-content.layout-side-by-side .hard-lines .dialogue-content {
        display: block;
        position: relative;
        width: 100%;
    }
    
    /* Passage display takes left half */
    .reading-mode-content.layout-side-by-side .dialogue-content .passage-display {
        display: inline-block;
        width: 48%;
        vertical-align: top;
    }
    
    /* Translation stays absolutely positioned but adjusted for tablet */
    .reading-mode-content.layout-side-by-side .passage-display .passage-translation { 
        position: absolute;
        left: 50%;
        right: 0;
        top: 0;
        padding-left: 15px;
        border-left: 2px solid #e0e0e0;
        margin: 0;
        display: block;
        width: 48%;
    }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Analysis section styling */
.analysis-section {
  border-radius: 4px;
}

.analysis-section h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #495057;
  font-size: 16px;
  font-weight: 600;
}

/* Translation-only mode styling */
.translation-only .translation-text {
  font-size: 1.2em;
  line-height: 1.6;
  color: #2c3e50;
  font-weight: 400;
}

.translation-only .dialogue-content {
  padding: 8px 0;
}

.translation-only.dialogue-line-audio {
  transition: background-color 0.3s;
}

.audio-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.audio-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audio-item label {
  font-size: 13px;
  color: #6c757d;
  font-weight: 500;
}

.audio-item audio {
  width: 100%;
  height: 40px;
}

.results-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

/* Feedback buttons styling */
.feedback-buttons {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid #dee2e6;
  background: #ffffff;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.05s;
}

.feedback-btn:active {
  transform: translateY(1px);
}

/* Color themes for feedback buttons */
.feedback-btn.feedback-poor { border-color: #dc3545; color: #dc3545; }
.feedback-btn.feedback-poor:hover,
.feedback-btn.feedback-poor.active { background: #dc3545; color: #ffffff; }

.feedback-btn.feedback-fair { border-color: #ffc107; color: #b38600; }
.feedback-btn.feedback-fair:hover,
.feedback-btn.feedback-fair.active { background: #ffc107; color: #212529; }

.feedback-btn.feedback-good { border-color: #28a745; color: #1e7e34; }
.feedback-btn.feedback-good:hover,
.feedback-btn.feedback-good.active { background: #28a745; color: #ffffff; }

.roleplay-action-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}

.roleplay-action-btn:hover {
  background: #0056b3;
}

/* Character Panel Styles */
.character-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.character-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.character-panel {
    position: fixed;
    top: 0;
    right: -600px;
    width: 600px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.character-panel.active {
    right: 0;
}

.character-panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    background: #f8f9fa;
}

.character-panel-close {
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.character-panel-close:hover {
    color: #000;
}

.character-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.character-panel-loading {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-style: italic;
}

.character-panel-error {
    text-align: center;
    padding: 40px;
    color: #dc3545;
}

.character-panel-error h3 {
    color: #dc3545;
    margin-bottom: 10px;
}

.character-panel-error .error-details {
    font-size: 12px;
    color: #6c757d;
    margin-top: 10px;
    font-family: monospace;
}

/* Mobile responsiveness for character panel */
@media (max-width: 768px) {
    .character-panel {
        width: 100%;
        right: -100%;
    }
}

/* Ensure character content fits well in panel */
.character-panel .character-header {
    margin-top: 0;
    padding-top: 0;
}

.character-panel .tab-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
}

.character-panel .character-audio-player-container {
    margin: 15px 0;
}

/* Adjust z-index for navigation drawer to not conflict */
.nav-drawer {
    z-index: 9990;
}

.nav-drawer-overlay {
    z-index: 9989;
}

/* Character Audio Player Styles */
.character-audio-player-container {
    /* Hidden container for JS initialization */
    display: none;
}

.character-audio-btn {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.character-audio-btn:hover {
    background: #e9ecef;
}

.character-audio-btn.playing {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.character-audio-player-container .seek-bar {
    flex: 1;
    min-width: 100px;
    max-width: 300px;
}

.character-audio-player-container .time-display {
    font-size: 12px;
    color: #6c757d;
    white-space: nowrap;
}

.character-audio-player-container .volume-slider {
    width: 80px;
}

.character-audio-player-container .current-example-display {
    font-size: 12px;
    color: #495057;
    margin-left: auto;
}

/* Highlight playing examples */
.character-example-audio {
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;
}

.character-example-audio:hover {
    background-color: #f0f8ff;
}

.character-example-audio.audio-playing {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding-left: 8px;
}

/* Audio icon indicator */
.character-example-audio::before {
    content: "🔊";
    position: absolute;
    left: -20px;
    opacity: 0;
    transition: opacity 0.2s;
}

.character-example-audio:hover::before {
    opacity: 0.5;
}

.character-example-audio.audio-playing::before {
    opacity: 1;
}

/* Character Panel Floating Play Button */
.character-floating-play-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.character-floating-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.character-floating-play-btn:active {
    transform: scale(0.95);
}

.character-floating-play-btn .play-icon {
    display: inline-block;
    line-height: 1;
    margin-left: 2px;
}

.character-floating-play-btn.playing {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.character-floating-play-btn.playing .play-icon {
    margin-left: 0;
}

/* Make tab content container position relative for absolute button positioning */
.character-tab-content {
    position: relative;
    padding-bottom: 80px; /* Space for floating button */
}

/* Hide Pinyin Mode - Applied when Hide Pinyin setting is enabled */
.hide-pinyin-mode rt { 
    display: none !important; /* Hide ruby text (pinyin) */
}

.hide-pinyin-mode rp { 
    display: none !important; /* Hide ruby parentheses */
}

/* Remove tone colors when Hide Pinyin is enabled */
.hide-pinyin-mode .tone-1,
.hide-pinyin-mode .tone-2,
.hide-pinyin-mode .tone-3,
.hide-pinyin-mode .tone-4,
.hide-pinyin-mode .tone-neutral { 
    color: inherit !important; /* Use default text color */
}

/* Also remove background colors if any */
.hide-pinyin-mode .tone-1,
.hide-pinyin-mode .tone-2,
.hide-pinyin-mode .tone-3,
.hide-pinyin-mode .tone-4,
.hide-pinyin-mode .tone-neutral {
    background-color: transparent !important;
}

/* ============================================
   DARK MODE STYLES
   ============================================ */

/* Base dark mode styles */
.dark-mode {
    background: #1a1a1a;
    color: #e0e0e0;
}

.dark-mode body {
    background: #1a1a1a;
    color: #e0e0e0;
}

/* Tone colors adjusted for dark mode */
.dark-mode .tone-1 {
    color: #ff6b6b !important; /* Brighter red */
}

.dark-mode .tone-2 {
    color: #ffc952 !important; /* Brighter orange */
}

.dark-mode .tone-3 {
    color: #4ecdc4 !important; /* Brighter teal */
}

.dark-mode .tone-4 {
    color: #5ca7ff !important; /* Brighter blue */
}

.dark-mode .tone-neutral {
    color: #808080 !important; /* Gray */
}

/* Navigation drawer */
.dark-mode .nav-drawer {
    background: #252525;
    border-right-color: #404040;
}

.dark-mode .nav-drawer-header {
    background: #2d2d2d;
    border-bottom-color: #404040;
    color: #e0e0e0;
}

.dark-mode .dialogue-nav-item { border-bottom-color: #2a3340; }
.dark-mode .dialogue-nav-item:hover { background: #202635; }
.dark-mode .dialogue-nav-item.active { background: #202635; }

/* Settings popover */
.dark-mode .settings-popover {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .settings-popover-header {
    border-bottom-color: #404040;
    color: #e0e0e0;
}

.dark-mode .settings-item:hover {
    background: #333;
}

/* Tab navigation */
.dark-mode .tab-navigation {
    background: #252525;
    border-bottom-color: #404040;
}

.dark-mode .tab-button {
    background: #2d2d2d;
    color: #b0b0b0;
    border-color: #404040;
}

.dark-mode .tab-button:hover {
    background: #333;
    color: #e0e0e0;
}

.dark-mode .tab-button.active {
    background: #1a1a1a;
    color: #e0e0e0;
    border-bottom-color: #1a1a1a;
}

/* Reading controls */
.dark-mode .reading-controls {
    background: #252525;
    border-bottom-color: #404040;
}

.dark-mode .mode-btn {
    background: #2d2d2d;
    color: #b0b0b0;
    border-color: #404040;
}

.dark-mode .mode-btn:hover {
    background: #333;
    color: #e0e0e0;
}

.dark-mode .mode-btn.active {
    background: #404040;
    color: #fff;
}

/* Dialogue containers */
.dark-mode .dialogue-header {
    border-bottom-color: #404040;
}

/* .dark-mode .dialogue-meta removed */

.dark-mode .complexity-indicator {
    color: #ffc952;
}

/* Translation layout popover */
/* Dark mode for translate switch */
.dark-mode .translate-slider {
  background: #4a4a4a;
}

.dark-mode .translate-checkbox:checked + .translate-slider {
  background: #2563eb;
}

.dark-mode .translate-label {
  color: #b0b0b0;
}

.dark-mode .translation-layout-popover {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.dark-mode .translation-layout-popover .layout-option:hover,
.dark-mode .translation-layout-popover .layout-option.active {
    background: rgba(255, 255, 255, 0.15);
}

.dark-mode .translation-layout-trigger {
    background: #404040;
    border-color: #505050;
}

.dark-mode .translation-layout-trigger:hover {
    background: #505050;
}

/* Dialogue lines */
.dark-mode .dialogue-line-audio:hover {
    background: #2d2d2d;
}

.dark-mode .dialogue-line-audio.audio-playing {
    background: #3a3a2a;
    border-left-color: #ffc952;
}

.dark-mode .actor-a {
    color: #ff6b6b;
}

.dark-mode .actor-b {
    color: #5ca7ff;
}

/* Download menu */
.dark-mode .download-slide-menu {
    background: rgba(0, 0, 0, 0.8);
}

.dark-mode .download-menu-panel { background: var(--dm-surface); border: 1px solid var(--dm-border); }

.dark-mode .download-menu-header { background: var(--dm-surface-2); border-bottom-color: var(--dm-border); }

.dark-mode .download-dialogue-meta { color: var(--dm-muted); }

.dark-mode .download-section { background: rgba(255,255,255,0.02); border: 1px solid var(--dm-border); border-radius: 8px; }
.dark-mode .download-section h4 { color: var(--dm-text); }
.dark-mode .download-section p { color: var(--dm-muted); }
.dark-mode .download-btn { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); }
.dark-mode .download-btn:hover { background: #202635; border-color: #33425a; }

/* Character panels */
.dark-mode .character-header {
    background: #252525;
    border-bottom-color: #404040;
}

.dark-mode .character-panel {
    background: #252525;
    border-left-color: #404040;
}

.dark-mode .character-panel-header {
    background: #2d2d2d;
    border-bottom-color: #404040;
}

/* Forms and inputs */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode textarea,
.dark-mode select {
    background: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: #5ca7ff;
    background: #333;
}

/* Links */
.dark-mode a {
    color: #5ca7ff;
}

.dark-mode a:hover {
    color: #7dbfff;
}

/* Buttons */
.dark-mode .settings-trigger {
    background: #404040;
    border-color: #505050;
}

.dark-mode .settings-trigger:hover {
    background: #505050;
}

/* Audio buttons */
.dark-mode .line-audio-btn {
    background: #2d2d2d;
    color: #e0e0e0;
}

.dark-mode .line-audio-btn:hover {
    background: #404040;
}

/* Floating play button */
.dark-mode .floating-play-btn {
    background: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .floating-play-btn:hover {
    background: #505050;
}

/* Side-by-side translation border */
.dark-mode .reading-mode-content.layout-side-by-side .passage-display .passage-translation {
    border-left-color: #404040;
    color: #b0b0b0;
}

/* Scrollbars (webkit browsers) */
.dark-mode ::-webkit-scrollbar {
    background: #1a1a1a;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #404040;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #505050;
}

/* Ensure text remains readable */
.dark-mode .def,
.dark-mode .english,
.dark-mode .passage-translation {
    color: #b0b0b0;
}

/* Role play recording UI */
.dark-mode .roleplay-status {
    background: #252525;
    border-color: #404040;
}

.dark-mode .recording-indicator {
    background: #2d2d2d;
}

/* Feedback buttons */
.dark-mode .feedback-btn {
    background: #2d2d2d;
    border-color: #404040;
}

.dark-mode .feedback-btn:hover {
    background: #333;
}

/* Analysis sections */
.dark-mode .analysis-section {
    border-color: #404040;
}

.dark-mode .structure-slot {
    background: #1b2230;
    border-color: #2a3340;
    color: #e6eaf0;
}

/* Level chips refinement for dark mode */
.dark-mode .structure-slot-level1 {
    background: rgba(138, 180, 248, 0.08) !important;
    border-left: 3px solid #8ab4f8 !important;
}
.dark-mode .structure-slot-level2 {
    background: rgba(78, 205, 196, 0.08) !important;
    border-left: 2px solid #4ecdc4 !important;
}
.dark-mode .structure-slot-level1 .slot-header,
.dark-mode .structure-slot-level2 .slot-header { color: #a8b3c2; }
.dark-mode .structure-slot-level1 .slot-content,
.dark-mode .structure-slot-level2 .slot-content { color: #e6eaf0; }

/* Wordlist */
.dark-mode .wordlist-group {
    background: #252525;
    border-color: #404040;
}

.dark-mode .wordlist-header {
    background: #2d2d2d;
    border-bottom-color: #404040;
}

/* ============================================
   Dark Mode Palette Refinement (cohesive hues)
   ============================================ */
.dark-mode {
  /* Unified palette - Higher contrast */
  --dm-bg: #0f1115;
  --dm-surface: #151922;
  --dm-surface-2: #1b2230;
  --dm-border: #2a3340;
  --dm-text: #f5f7fa;
  --dm-muted: #c4cdd8;
  --dm-accent: #8ab4f8;
}

.dark-mode, .dark-mode body { background: var(--dm-bg); color: var(--dm-text); }

/* Surfaces */
.dark-mode .nav-drawer,
.dark-mode .reading-controls,
.dark-mode .download-menu-panel,
.dark-mode .character-panel,
.dark-mode .analysis-section,
.dark-mode .wordlist-group { background: var(--dm-surface); border-color: var(--dm-border); }

.dark-mode .nav-drawer-header,
.dark-mode .download-menu-header,
.dark-mode .character-panel-header { background: var(--dm-surface-2); border-bottom-color: var(--dm-border); }

/* Text */
.dark-mode .settings-popover-header,
.dark-mode .download-dialogue-meta { color: var(--dm-text); }
.dark-mode .def,
.dark-mode .english,
.dark-mode .passage-translation,
.dark-mode .dialogue-nav-topic { color: var(--dm-muted); }

/* Tabs */
.dark-mode .tab-navigation { background: var(--dm-surface); border-bottom-color: var(--dm-border); }
.dark-mode .tab-button { background: var(--dm-surface-2); color: var(--dm-muted); border-color: var(--dm-border); }
.dark-mode .tab-button:hover { background: #202635; color: var(--dm-text); }
.dark-mode .tab-button.active { background: var(--dm-bg); color: var(--dm-text); border-bottom-color: var(--dm-bg); }

/* Popovers */
.dark-mode .translation-layout-popover,
.dark-mode .settings-popover { background: var(--dm-surface-2); border-color: var(--dm-border); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.dark-mode .translation-layout-popover .layout-option:hover,
.dark-mode .translation-layout-popover .layout-option.active { background: rgba(138,180,248,0.12); }

/* Buttons */
.dark-mode .translation-layout-trigger,
.dark-mode .settings-trigger { background: #273247; border-color: #33425a; color: var(--dm-text); }
.dark-mode .translation-layout-trigger:hover,
.dark-mode .settings-trigger:hover { background: #2f3c55; }

.dark-mode .download-btn,
.dark-mode .roleplay-action-btn,
.dark-mode .feedback-btn { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); }
.dark-mode .download-btn:hover,
.dark-mode .roleplay-action-btn:hover,
.dark-mode .feedback-btn:hover { background: #202635; border-color: #33425a; }

/* Dialogue lines */
.dark-mode .dialogue-line-audio:hover { background: #202635; }
.dark-mode .dialogue-line-audio.audio-playing { background: #1f2a3a; border-left-color: var(--dm-accent); }

/* Accents and chips */
.dark-mode .actor-a { color: #ff8a8a; }
.dark-mode .actor-b { color: var(--dm-accent); }

/* Side-by-side panel border and text */
.dark-mode .reading-mode-content.layout-side-by-side .passage-display .passage-translation { border-left-color: var(--dm-border); color: var(--dm-muted); }

/* Scrollbars refined */
.dark-mode ::-webkit-scrollbar { background: var(--dm-bg); }
.dark-mode ::-webkit-scrollbar-thumb { background: #2a3340; }
.dark-mode ::-webkit-scrollbar-thumb:hover { background: #33425a; }

/* Feedback indicators in navigation */
.dark-mode .dialogue-nav-item.feedback-good {
    border-left-color: #5cb85c;
    background: rgba(92, 184, 92, 0.1);
    color: #7dd17d;
}
.dark-mode .dialogue-nav-item.feedback-good:hover,
.dark-mode .dialogue-nav-item.active.feedback-good:hover {
    background: rgba(92, 184, 92, 0.15);
}

.dark-mode .dialogue-nav-item.feedback-fair {
    border-left-color: #f0ad4e;
    background: rgba(240, 173, 78, 0.1);
    color: #f0ad4e;
}
.dark-mode .dialogue-nav-item.feedback-fair:hover,
.dark-mode .dialogue-nav-item.active.feedback-fair:hover {
    background: rgba(240, 173, 78, 0.15);
}

.dark-mode .dialogue-nav-item.feedback-poor {
    border-left-color: #d9534f;
    background: rgba(217, 83, 79, 0.1);
    color: #e67e7b;
}
.dark-mode .dialogue-nav-item.feedback-poor:hover,
.dark-mode .dialogue-nav-item.active.feedback-poor:hover {
    background: rgba(217, 83, 79, 0.15);
}

/* Feedback buttons */
.dark-mode .feedback-btn.feedback-poor { 
    border-color: #d9534f; 
    color: #e67e7b; 
}
.dark-mode .feedback-btn.feedback-poor:hover,
.dark-mode .feedback-btn.feedback-poor.active { 
    background: #d9534f; 
    color: #ffffff; 
}

.dark-mode .feedback-btn.feedback-fair { 
    border-color: #f0ad4e; 
    color: #f0ad4e; 
}
.dark-mode .feedback-btn.feedback-fair:hover,
.dark-mode .feedback-btn.feedback-fair.active { 
    background: #f0ad4e; 
    color: #212529; 
}

.dark-mode .feedback-btn.feedback-good { 
    border-color: #5cb85c; 
    color: #7dd17d; 
}
.dark-mode .feedback-btn.feedback-good:hover,
.dark-mode .feedback-btn.feedback-good.active { 
    background: #5cb85c; 
    color: #ffffff; 
}

/* Stage navigation header */
.dark-mode .stage-nav-header {
    background: var(--dm-surface);
    color: var(--dm-text);
    border-bottom: 1px solid var(--dm-border);
}

.dark-mode .stage-nav-group.current-stage .stage-nav-header {
    background: rgba(138, 180, 248, 0.1);
    border-left-color: var(--dm-accent);
}

/* High contrast text for headers and important elements */
.dark-mode .dialogue-header-container h2 {
    color: #ffffff;
}

.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4 {
    color: #ffffff;
}

/* .dark-mode .dialogue-meta removed */
/* {    color: #b8c4d4; */
}

.dark-mode .dialogue-header {
    color: #ffffff;
}

/* Improve contrast for muted text elements */
.dark-mode .dialogue-nav-topic {
    color: #9ca8b8;
}

.dark-mode .dialogue-nav-category {
    color: #d0d8e4;
}

.dark-mode .stage-nav-name {
    color: #ffffff;
}

/* Better contrast for side-by-side translation text */
.dark-mode .reading-mode-content.layout-side-by-side .passage-display .passage-translation {
    border-left-color: var(--dm-border);
    color: #b8c4d4;
}

/* When both dark mode and hide pinyin are active, remove tone colors */
.dark-mode.hide-pinyin-mode .tone-1,
.dark-mode.hide-pinyin-mode .tone-2,
.dark-mode.hide-pinyin-mode .tone-3,
.dark-mode.hide-pinyin-mode .tone-4,
.dark-mode.hide-pinyin-mode .tone-neutral {
    color: inherit !important;
}

/* Long press selected line in dark mode */
.dark-mode .dialogue-line-audio.long-press-selected {
    background-color: rgba(138, 180, 248, 0.1);
    border-left-color: #8ab4f8;
}