style.css

@import url('https://fonts.googleapis.com/css2?family=Iansui&display=swap');

@font-face {
  font-family: '源石黑體';
  src: local('源石黑體');
}

@font-face {
  font-family: '源石黑體';
  src: local('GenSekiGothic TW R');
  font-weight: 700 !important;
}

@keyframes pulse-yellow-effect {
  0% {
    /* 開始同結束時个顏色 (用變數定義个暫停黃色) */
    background-color: var(--paused-yellow);
  }

  50% {
    /* 動畫中間點个顏色 (做得調整 alpha 值分佢較透明) */
    background-color: rgba(var(--paused-yellow-rgb, 255, 250, 205), 0.3);
    /* 預設用 LemonChiffon RGB */
  }

  100% {
    /* 回到開始个顏色 */
    background-color: var(--paused-yellow);
  }
}

/* 暗夜模式个動畫 (用不同个基礎顏色) */
@keyframes pulse-dark-yellow-effect {
  0% {
    background-color: var(--dark-paused-yellow);
    /* 暗夜模式个黃色 */
  }

  50% {
    /* 暗夜模式下，做得調整 alpha 值分佢較暗或較透明 */
    background-color: rgba(var(--dark-paused-yellow-rgb, 255, 255, 150), 0.3);
    /* 預設用暗夜黃色 RGB */
  }

  100% {
    background-color: var(--dark-paused-yellow);
  }
}

/* --- Loading Indicator Styles --- */
#loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading-text {
  font-size: 1.2em;
  margin-top: 20px;
  color: #333;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


:root {
  --title-font: 'PT Sans', 'Heiti TC', 'Heiti SC', '源石黑體', 'jf open 粉圓 2.0', tauhu-oo, Iansui, sans-serif;
  --roman-font: 'jf金萱那提2.0', tauhu-oo, Iansui, sans-serif;
  --main-text-color: #245d48;
  --iMazinGrace-1: #aa96b7;
  --iMazinGrace-1-rgb: 170, 150, 183;
  /* 新增 RGB 版本方便用 rgba() */
  --paused-yellow-rgb: 255, 250, 205;
  /* RGB 版本方便用 rgba() */
  --paused-yellow: rgba(var(--paused-yellow-rgb), 1);
  /* 改用 rgba 確保一致 */
  /* --- Focus Glow Variables (Light Mode) --- */
  --focus-glow-color: rgba(59, 130, 246, 0.65);
  /* 日時頭用較亮个藍色 */
  --focus-glow-blur: 6px;
  --focus-glow-spread: 1px;
  --popup-btn-bg: #e9ecef;
  --popup-btn-border: #ced4da;
  --popup-btn-text: #495057;
  --popup-btn-bg-hover: #dee2e6;
}

/* radio button style from <https: //webspe.net/tools/en/radio-button/> */
.radioItem {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  /* 預留邊框空間 */
  border-radius: 8px;
  /* 預設圓角 */
  padding: 2px 5px;
  /* 預設內距 */
  margin-right: 8px;
  /* 稍微調整間距 */
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  /* 可選：平滑過渡效果 */
}

.radioItem:not(:last-of-type) {
  margin-right: 16px;
}

.radioButton {
  appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #06b6d4;
  border-radius: 9999px;
  background-color: #dddddd;
  cursor: pointer;
}

.radioButton:checked {
  background-color: transparent;
}

/* --- Global Focus Glow Style --- */
:is(button, select, textarea, a, input):focus-visible,
[contenteditable="true"]:focus-visible {
  outline: none;
  /* 拿忒預設个 outline，改用 box-shadow 做光暈 */
  box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color);
  transition: box-shadow 0.15s ease-in-out;
  /* 光暈出現/消失个平滑過渡 */
}

/* --- Specific Focus Adjustments --- */
/* 確保腔調級別連結个 focus 光暈有圓角 */
.dialect>span[data-varname]>a:focus-visible {
  border-radius: 6px;
  /* 比佢外背 span 个 8px 細一息仔，較好看 */
}

/* 確保進度詳情連結个 focus 光暈也有圓角 */
#progressDetails>a:focus-visible {
  border-radius: 4px;
  /* 設定一個適中个圓角 */
}

.radioButton:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 12px;
  height: 12px;
  margin: auto;
  border: 2px solid #06b6d4;
  border-radius: 9999px;
}

/* Mine */
td[data-label="詞彙"],
.pronunciation-text {
  ruby {
    font-family: var(--title-font) !important;
    font-size: 1.5em;
    font-weight: 700;
  }

  rt,
  ruby[class^="sandhi-"] {
    /* 改用屬性選擇器 */
    font-size: 1em;
    font-family: var(--roman-font) !important;
    margin-bottom: 0.3em;
  }

  ruby[class^="sandhi-"] {
    /* 改用屬性選擇器 */
    font-size: revert !important;
    /* font-family: initial !important; */

    rt {
      font-size: initial !important;
      color: inherit;
    }
  }

  rt {
    /*font-size: initial !important;*/
    color: inherit;
  }
}

.sentence rt {
  font-size: 70%;
}

ruby.sandhi-高降變 {
  color: red;
}

ruby.sandhi-中平變 {
  color: darkorchid;
}

ruby.sandhi-低升變 {
  color: blue;
}

body {
  font-size: 20px;
}

body,
body * {
  font-family: Iansui, '霞鶩文楷 TC', 'LXGW WenKai', tauhu-oo, serif;
  line-height: 1.8em;
  color: var(--main-text-color);
}

.title-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#main-content h2 {
  margin-right: 1em;
  margin-bottom: 0;
  margin-top: 0;
}

#main-content h4 {
  margin: 0;
  line-height: 1.2em;
}

#main-content h2 a {
  text-decoration: none;
  display: block;
}

@media screen and (max-width: 768px) {
  .title-container {
    flex-direction: column;
    text-align: center;
  }

  #main-content h2 {
    margin-right: 0;
    margin-bottom: 0.5em;
  }
}

#main-content h2 img {
  height: 1.8em;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}

/*table {
  table-layout: fixed;
  width: 100%;
}*/
td {
  padding: 1em;
  /*max-width: 60vw;*/
}

tr:nth-child(even) {
  background-color: rgba(103, 140, 63, 0.5);
}

a {
  color: #678c3f;
}

.media {
  height: 1em;
  border-radius: 1em;
}

/* audio {
  max-width: 5em;
}*/
/* 同狹螢幕做成卡片以後就毋使吔，td 差毋多都有罅闊 */
.no {
  font-family: 'Operator Mono';
}

.sentence,
.sentence * {
  font-family: 'Marion', 'Marion+jfBunguan', tauhu-oo, cursive;
  text-decoration: underline;
}

#header {
  position: sticky;
  top: 10px;
  background: rgba(170, 150, 183, 0.5);
  backdrop-filter: blur(5px);
  z-index: 10;
  padding: 4px 15px;
  /* 微調 padding */
  display: flex;
  /* 改用 Flexbox 排版 */
  align-items: center;
  /* 垂直置中 */
  justify-content: flex-start;
  /* <--- 改為從頭開始對齊 */
  /* flex-wrap: wrap; /* 改做做得換行 */
  gap: 10px;
  /* 項目之間的間距 */
  font-family: var(--title-font);
}

.bookmarkBtn {
  background: none;
  border: none;
  cursor: pointer;
}

.bookmarkBtn,
.crossDialectBtn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 3px;
  vertical-align: middle;
}

.bookmarkBtn i {
  color: var(--iMazinGrace-1) !important;
}

/* --- New Number Button Style for Issue #198 --- */
.bookmarkBtn.number-btn {
  font-family: 'Operator Mono';
  font-size: 1rem;
  /* Match the original .no column size */
  color: var(--main-text-color);
  /* Default text color */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Space between number and icon */
  padding: 4px 8px;
  border-radius: 4px;
  /* Make it look like a button by default */
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.bookmarkBtn.number-btn:hover {
  background-color: rgba(var(--iMazinGrace-1-rgb), 0.2);
  /* Light highlight on hover */
  /* color: var(--iMazinGrace-1); */
}

/* Make the icon slightly smaller or subtler when part of the number button */
.bookmarkBtn.number-btn i {
  font-size: 0.8em;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.bookmarkBtn.number-btn:hover i {
  opacity: 1;
}

.crossDialectBtn {
  font-size: 1.5em;
}

.crossDialectBtn i {
  color: #4a67a1 !important;
  transition: transform 0.3s ease;
}

.accordion-parent .crossDialectBtn i {
  transform: rotate(135deg);
}

@media (prefers-color-scheme: dark) {
  .crossDialectBtn i {
    color: #8cb3d9 !important;
  }

  .bookmarkBtn.number-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
  }
}

tr.accordion-parent>td {
  border-top: 5px solid orange;
}

tr.accordion-parent>td:first-child,
tr.accordion-row>td:first-child {
  border-left: 5px solid orange;
}

tr.accordion-parent>td:last-child,
tr.accordion-row>td:last-child {
  border-right: 5px solid orange;
}

tr.accordion-row-last>td {
  border-bottom: 5px solid orange;
}

tr.accordion-parent>td:first-child {
  border-top-left-radius: 8px;
}

tr.accordion-parent>td:last-child {
  border-top-right-radius: 8px;
}

tr.accordion-row-last>td:first-child {
  border-bottom-left-radius: 8px;
}

tr.accordion-row-last>td:last-child {
  border-bottom-right-radius: 8px;
}

tr.accordion-row * {
  color: white !important;
}

tr.accordion-row {
  filter: brightness(95%);
}

tr.accordion-row.四縣,
tr.accordion-row.海陸,
tr.accordion-row.大埔,
tr.accordion-row.饒平,
tr.accordion-row.詔安 {
  color: white;
}

tr.accordion-row.四縣 {
  background-color: #678d3f;
}

tr.accordion-row.海陸 {
  background-color: #76ad67;
}

tr.accordion-row.大埔 {
  background-color: #5898a9;
}

tr.accordion-row.饒平 {
  background-color: #834fa1;
}

tr.accordion-row.詔安 {
  background-color: #974a47;
}

@media (prefers-color-scheme: dark) {

  tr.accordion-row.四縣,
  tr.accordion-row.海陸,
  tr.accordion-row.大埔,
  tr.accordion-row.饒平,
  tr.accordion-row.詔安 {
    filter: brightness(0.8) saturate(0.9);
  }
}


@media screen and (max-width: 768px) {

  #generated tr.accordion-parent,
  #generated tr.accordion-row {
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 1px dotted rgba(var(--iMazinGrace-1-rgb, 170, 150, 183), 0.3);
    border-left: 5px solid orange;
    border-right: 5px solid orange;
  }

  #generated tr.accordion-parent {
    border-top: 5px solid orange;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  #generated tr.accordion-row-last {
    margin-bottom: 1.5em;
    border-bottom: 5px solid orange;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  #generated tr.accordion-parent td,
  #generated tr.accordion-row td {
    border: none !important;
  }

  #generated tr.accordion-row.四縣 {
    background-color: #678d3f !important;
  }

  #generated tr.accordion-row.海陸 {
    background-color: #76ad67 !important;
  }

  #generated tr.accordion-row.大埔 {
    background-color: #5898a9 !important;
  }

  #generated tr.accordion-row.饒平 {
    background-color: #834fa1 !important;
  }

  #generated tr.accordion-row.詔安 {
    background-color: #974a47 !important;
  }
}

#generated td:nth-of-type(2) {
  text-align: center;
  max-width: 40vw;
}

.progressLvl {
  color: red;
}

.progressCat {
  color: blue;
}

/* 歸到頁頂高个按鈕 */
#backToTopBtn {
  display: none;
  /* 預設隱藏 */
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明黑色背景 */
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}

#backToTopBtn:hover {
  background-color: rgba(0, 0, 0, 0.8);
  /* 滑鼠懸停時加深背景顏色 */
}

#backToTopBtn i {
  color: white;
}

/* 播放全部 */
#audioControls {
  /* 如果 #audioControls 沒有其他 flex 相關設定，
     可以加上 flex-shrink: 0 確保它也不會被壓縮 */
  flex-shrink: 0;
  margin-left: 1%;
  /* display: inline-flex; */
  /* 如果原本有 display，確保與 flex 容器兼容 */
  /* align-items: center; */
  /* 確保按鈕垂直對齊 */
}

#audioControls button {
  border: none;
  font-size: clamp(15px, 2vw, 22px);
  /* margin: 0 5px;*/
  background: none;
  padding: 0;
  margin: 0 3px;
  vertical-align: middle;
}

#audioControls button i,
button.playFromThisRow i {
  cursor: pointer;
  background: green;
  color: wheat;
  box-shadow: 2px 2px purple;
  border-radius: 0.3em;
  padding: 0.5em;
}

#audioControls button.playable i,
button.playFromThisRow.playable i {
  background-color: green !important;
}

#audioControls button.ongoing i,
button.playFromThisRow.ongoing i {
  background-color: yellow !important;
  color: var(--main-text-color);
}

#audioControls button.ended i,
button.playFromThisRow.ended i {
  background-color: red !important;
}

/* --- Commit Info in Modal --- */
#commit-info-modal {
  display: inline-block;
  font-size: 0.8rem;
  color: #6c757d;
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
}

#commit-info-modal a {
  color: #007bff;
  text-decoration: none;
}

#commit-info-modal a:hover {
  text-decoration: underline;
}

/* --- 【新增】循環播放按鈕樣式 --- */
button#loopCategoryBtn.active i {
  background-color: #ff8c00;
  /* 暗橘色表示 active */
  color: white;
}

.loop-one-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0 3px;
  vertical-align: middle;
}

.loop-one-btn i {
  cursor: pointer;
  background: #8a2be2;
  /* 藍紫色 */
  color: wheat;
  box-shadow: 2px 2px #9932cc;
  /* 中蘭花紫 */
  border-radius: 0.3em;
  padding: 0.5em;
}

.loop-one-btn.looping i {
  background-color: #ff4500;
  /* 橘紅色表示 looping */
  color: white;
}

tr.looping-row {
  background-color: rgba(255, 105, 180, 0.4);
  /* 粉紅色背景 */
  animation: pulse-pink-effect 2s infinite ease-in-out;
}

@keyframes pulse-pink-effect {
  0% {
    background-color: rgba(255, 105, 180, 0.4);
  }

  50% {
    background-color: rgba(255, 105, 180, 0.2);
  }

  100% {
    background-color: rgba(255, 105, 180, 0.4);
  }
}


.playFromThisRow {
  background: none;
  border: none;
}

button#playAllBtn {
  display: none;
}

audio[data-skip='true'] {
  display: none;
}

.notes {
  font-size: 0.8em;
  font-family: 'Linux Libertine', 'Huiwen-Fangsong', serif;
  color: white;
  background-color: #aa96b7;
  padding: 0.2em;
  border-radius: 0.5em;
}

.dialect {
  padding:
    /*0.3em 1em;*/
    5px 10px;
  display: inline-block;
  color: black;
  margin-bottom: 5px;
  /* 加點垂直間距 */
  vertical-align: middle;
}

.四縣 {
  background-color: #678d3f;
  color: black;

  a {
    color: white;
  }
}

.海陸 {
  background-color: #76ad67;
}

.大埔 {
  background-color: #5898a9;
}

.饒平 {
  background-color: #834fa1;
}

.詔安 {
  background-color: #974a47;
}

/* 確保連結樣式正確 */
.dialect>span[data-varname]>a {
  color: white;
  /* text-decoration: none;*/
  display: block;
  /* 讓連結填滿 span */
}

tr#nowPlaying {
  /*text-shadow: 0.2em 0.2em 0.3em var(--iMazinGrace-1);*/
  /*text-shadow: 0.05em 0.05em 0px #ffffff, 0.1em 0.1em 0px rgba(0, 0, 0, 0.15);*/
  position: relative;
  /* 必須設定，以讓偽元素相對於 tr 定位 */
  /* 設定規條个背景色，用 rgba 同變數 */
  background-color: rgba(var(--iMazinGrace-1-rgb), 0.5);
  /* 加入背景色个過渡效果 */
  transition: background-color 0.4s ease;
  /* 0.4 秒个 ease 過渡 */
}

/* --- 新增暫停狀態个樣式 --- */
tr#nowPlaying.paused-playback {
  /* background-color: var(--paused-yellow); <-- 這行做得註解掉或拿掉，因為動畫會處理 */
  animation: pulse-yellow-effect 3s infinite ease-in-out;
  /* 應用動畫 */
}

/* 學習進度下拉擇單 */
#progressDropdown {
  padding: 5px 8px;
  /* 內邊距 */
  border: 1px solid #ccc;
  /* 邊框 */
  border-radius: 4px;
  /* 圓角 */
  background-color: white;
  /* 背景色 */
  font-family: inherit;
  /* 繼承父元素字型 */
  font-size: clamp(18px, 2vw, 2rem);
  /* 字型大小，可調整 */
  margin: 0;
  /* 移除外距，由 header 的 gap 控制 */
  vertical-align: middle;
  /* 垂直對齊方式 */
  max-width: 30vw;
  /* 變狹因為有 #resultsSummary 吔 */
  /*flex-grow: 1; /* 允許它伸展利用空間 */
  min-width: 50px;
  /* 確保最小寬度 */
  cursor: pointer;
  /* 滑鼠指標 */
  flex-shrink: 1;
  /* 允許被壓縮 */
}

/* --- 修改：加強下拉選單个 focus 光暈，並確保 Firefox 點擊時顯示 --- */
#progressDropdown:focus {
  /* 改用 :focus 來處理滑鼠點擊个情況 */
  border-color: var(--focus-glow-color);
  /* 直接改變邊框顏色，較明顯 */
  box-shadow: 0 0 8px 2px var(--focus-glow-color);
  /* 加強原本个光暈效果 */
  /* 加入邊框顏色个過渡效果，同 box-shadow 一樣時間 */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#progressDetails {
  font-size: clamp(18px, 1.5vw, 30px);
  /* 稍微小一點的字 */
  color: #555;
  /* 設定顏色 */
  vertical-align: middle;
  /* 垂直對齊 */
  /*margin-left: 8px; /* 和下拉選單間隔 */
  flex-shrink: 1;
  /* 允許被壓縮 */

  a {
    color: wheat;
    font-family: var(--title-font);
    white-space: nowrap;
  }
}

/* Autoplay Modal Styles */
#autoplayModal {
  position: fixed;
  /* 固定在視窗上 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  /* 確保在最上層 */
  display: none;
  /* 初始隱藏 */
  align-items: center;
  /* 垂直置中 */
  justify-content: center;
  /* 水平置中 */
  background-color: rgba(0, 0, 0, 0.6);
  /* 半透明黑色背景 */
}

/* 移除 modal-backdrop 的樣式，因為 #autoplayModal 本身就有背景了 */
/* .modal-backdrop { ... } */

.modal-content {
  position: relative;
  /* 相對定位，以便內容在背景之上 */
  background-color: #aa96b7;
  padding: 30px 40px;
  /* 增加左右 padding */
  border-radius: 8px;
  /* text-align: center; /* 由 justify-content 取代 */
  width: 50vw;
  /* 寬度 50% 視窗寬度 */
  height: 50vh;
  /* 高度 50% 視窗高度 */
  overflow: auto;
  /* 如果內容過多，允許滾動 */
  cursor: pointer;
  /* 提示使用者可以點擊 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  line-height: 1.6;
  /* 增加行高 */

  /* --- 新增 Flexbox 屬性 --- */
  display: flex;
  /* 將此元素設為 Flex 容器 */
  align-items: center;
  /* 垂直置中容器內的項目 */
  justify-content: center;
  /* 水平置中容器內的項目 (取代 text-align) */
  /* --- 新增結束 --- */
}

.modal-content>p {
  margin: 0;
  /* 移除預設的 margin */
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  /* 稍微放大字體 */
  text-align: center;
  /* 確保段落內的文字也是置中的 */
  color: #d9e2a9;
}

/* 如果你選擇加入按鈕，可以加上樣式 */
/*
#startAutoplayBtn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
}
*/

/* 選中的「腔別+級別」連結容器樣式 */
span[data-varname].active-dialect-level {
  border-radius: 8px;
  /* 圓角 */
  padding: 3px 6px;
  /* 微調內距，讓框線不要太貼近文字 */
  /* 移除舊的背景色和紅色邊框，改用更通用、更顯眼个樣式 */
  border: 2px solid #FFD700;
  /* 用金色邊框，在各種底色上都較顯眼 */
  box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.7);
  /* 用金色光暈來強化效果 */
  background-color: rgba(255, 255, 255, 0.2);
  /* 加一層淡淡的白色透明背景，增加可讀性 */
}

/* --- 新增：為 span[data-varname] 設定基本樣式以避免跳動 --- */
.dialect>span[data-varname] {
  /* 直接選取內層的 span */
  display: inline-block;
  /* 讓 padding 和 border 生效 */
  border: 2px solid transparent;
  /* 預留邊框空間 */
  border-radius: 8px;
  /* 預設圓角 */
  /*! padding: 3px 6px; */
  /* 預設內距，與 active 狀態一致 */
  /*! margin: 0 2px; */
  /* 微調級別之間的水平間距 */
  vertical-align: middle;
  /* 確保垂直對齊 */
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* 平滑過渡效果 */
}

/* 選中的「類別」選項標籤樣式 */
.radioItem.active-category {
  border: 2px solid #dc3545;
  /* 紅色邊框 */
  border-radius: 8px;
  /* 圓角 */
  padding: 2px 5px;
  /* 微調內距 */
  background-color: rgba(220, 53, 69, 0.1);
  /* 可選：加上淡淡的紅色背景 */
}

/* --- 客話選詞 Popup 樣式 (Hakka Selection Popup Styles) --- */
#selectionPopupBackdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  /* 半透明背景 */
  z-index: 1051;
  /* 比 Romanizer Modal 高 */
  /* display: none; 由 JS 控制 */
}

#selectionPopup {
  position: absolute;
  /* 改做絕對定位 */
  /* top, left 會由 JavaScript 動態設定 */
  background-color: #fff;
  /* 日間模式背景 */
  color: var(--main-text-color);
  /* 日間模式文字 */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 1052;
  /* 比 backdrop 高一層 */
  /* display: none; 由 JS 控制 */
  width: clamp(300px, 60vw, 500px);
  /* 響應式寬度，最小 300px */
  max-height: 70vh;
  /* 最大高度 */
  overflow-y: auto;
  /* 內容超過時顯示捲軸 */
  font-family: var(--title-font);
  outline: none;
  /* 移除 focus 時个預設 outline，因為 JS 會 focus 佢 */
}

.popup-controls {
  /* 新增：控制項容器 */
  display: flex;
  align-items: center;
  gap: 15px;
  /* Add space between items */
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.popup-romanizer-btn {
  background-color: var(--popup-btn-bg);
  border: 1px solid var(--popup-btn-border);
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.9em;
  color: var(--popup-btn-text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--title-font);
}

.popup-romanizer-btn:hover {
  background-color: var(--popup-btn-bg-hover);
}

/* Toggle Switch Styles */
.popup-toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-toggle-switch .toggle-label {
  font-size: 0.9em;
  color: var(--main-text-color);
  cursor: pointer;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  /* 略為縮小 */
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  /* 加快一點動畫 */
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  /* 分隔線 */
  margin-bottom: 15px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  /* 配合縮小 */
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
}

input:checked+.slider {
  background-color: var(--focus-glow-color, #2196F3);
  /* 用主題強調色 */
}

input:focus-visible+.slider {
  box-shadow: 0 0 2px var(--focus-glow-color, #2196F3);
}

input:checked+.slider:before {
  transform: translateX(22px);
  /* 調整滑動距離 width - dot_width - 2*left_pos = 44 - 16 - 6 = 22 */
}


.popup-header h4 {
  /* Popup 標題 */
  margin: 0;
  font-size: 1.2em;
  font-weight: 600;
  color: inherit;
  /* 繼承 #selectionPopup 个文字顏色 */
}

#selectionPopupCloseBtn {
  /* 關閉撳鈕 */
  background: none;
  border: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
  transition: color 0.2s ease;
}

#selectionPopupCloseBtn:hover,
#selectionPopupCloseBtn:focus-visible {
  /* 加上 focus-visible 樣式 */
  color: #333;
  outline: none;
  /* 確保自訂 focus 樣式時無預設 outline */
  /* 可選：加上同其他元素一樣个 focus glow */
  /* box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color); */
}

#selectionPopupContent ul {
  /* 讀音列表 */
  list-style: disc;
  /* 改用實心圓點 */
  padding-left: 25px;
  /* 增加左邊內距分圓點空間 */
  margin: 0;
}

#selectionPopupContent li {
  /* 列表項目 */
  padding: 6px 2px;
  /* 微調 padding */
  /* border-bottom: 1px solid #f0f0f0; */
  /* 暫時拿掉底線，做得看效果 */
  font-size: 1em;
  line-height: 1.6;
  /* 微調行高 */
}

#selectionPopupContent li .pronunciation-source {
  /* 讀音來源標示 */
  font-size: 0.85em;
  color: #777;
  margin-left: 8px;
}

#selectionPopupContent .popup-not-found {
  /* 尋無讀音个訊息 */
  padding: 10px 0;
  font-style: italic;
  color: #555;
  text-align: center;
}

/* --- Accordion Styles for Popup --- */
.accordion-item {
  border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
  border-bottom: none;
}

/* --- 取代並新增 Accordion Header 樣式 --- */
.accordion-header {
  background-color: transparent;
  color: var(--main-text-color);
  cursor: pointer;
  padding: 12px 5px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
  font-size: 1em;
  /* 【新】改做 Flexbox 排版 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  /* 內容摎控制項之間个距離 */
  font-family: var(--title-font);
}

.accordion-header:hover,
.accordion-header.active {
  background-color: #f0f0f0;
}

/* 【新】標頭內容个容器 */
.accordion-header-content {
  flex-grow: 1;
  /* 佔用大部分空間 */
  display: flex;
  flex-direction: column;
  /* 分詞目摎來源上下排列 */
}

.accordion-header .pronunciation-text {
  font-family: var(--roman-font);
  font-weight: 700;
}

.accordion-header .pronunciation-source {
  font-size: 0.85em;
  color: #777;
  margin-top: 2px;
  /* 同頂高个讀音隔開一息仔 */
}

/* 【新】標頭控制項个容器 */
.accordion-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 控制項之間个距離 */
  flex-shrink: 0;
  /* 毋分佢縮起來 */
}

/* 【新】「選用這筆讀音」个按鈕樣式 */
.popup-substitute-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #007bff;
  font-size: 1.1em;
  transition: background-color 0.2s, border-color 0.2s;
}

.popup-substitute-btn:hover {
  background-color: #e7f3ff;
  border-color: #007bff;
}

.accordion-header .indicator {
  font-size: 1.2em;
  font-weight: bold;
  width: 1em;
  /* 固定闊度，避免展開時跳動 */
  text-align: center;
}

/* --- 暗夜模式个對應樣式 --- */
@media (prefers-color-scheme: dark) {

  .accordion-header:hover,
  .accordion-header.active {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .accordion-header .pronunciation-source {
    color: #aaa;
  }

  .popup-substitute-btn {
    color: var(--dark-link-color);
  }

  .popup-substitute-btn:hover {
    background-color: rgba(144, 202, 249, 0.15);
    border-color: var(--dark-link-color);
  }

  .popup-romanizer-btn {
    background-color: var(--popup-btn-bg);
    border-color: var(--popup-btn-border);
    color: var(--popup-btn-text);
  }

  .popup-romanizer-btn:hover {
    background-color: var(--popup-btn-bg-hover);
  }
}

.accordion-panel {
  padding: 0 18px 10px 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-panel p {
  margin: 8px 0;
  font-size: 0.9em;
  line-height: 1.5;
}

.sandhi-applied {
  color: #c0392b;
  /* A reddish color to highlight the change */
  font-weight: bold;
}

.pronunciation-text {
  display: inline-block;
}

.accordion-header-content br {
  margin-bottom: 4px;
}

.accordion-panel audio {
  max-width: 100%;
  height: 30px;
  /* Adjust height as needed */
  margin-top: 8px;
}

/* --- 新增：頁首搜尋容器樣式 --- */
#search-container {
  position: relative;
  margin-left: auto;
  /* 將搜尋框推到最右邊 */
}

#search-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 15px;
  /* 圓角 */
  width: 180px;
  /* 預設寬度 */
  transition: width 0.3s ease-in-out, background-color 0.3s;
}

#search-input:focus {
  width: 300px;
  /* focus 時變闊 */
  background-color: #f8f8f8;
}

#search-popup {
  display: none;
  /* 預設隱藏 */
  position: absolute;
  top: 100%;
  /* 在輸入框下方 */
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
  padding: 15px;
  width: 300px;
  /* 固定寬度 */
  margin-top: 5px;
  /* 和輸入框的間距 */
}

#search-container.active #search-popup {
  display: block;
  /* 當容器有 active class 時顯示 */
}

#dialect-selection,
#search-mode-selection {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#dialect-selection:not(:last-child) {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

#dialect-selection p,
#search-mode-selection p {
  margin: 0 0 5px 0;
  font-weight: bold;
}

#dialect-selection label,
#search-mode-selection label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

#results-summary {
  display: none;
  /* 預設完全隱藏，不佔空間 */
  position: sticky;
  top: 80px;
  /* Adjust this value based on your header's height */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  padding: 5px 20px;
  margin-bottom: 10px;
  z-index: 5;
  font-weight: bold;

  /* Flexbox 佈局 */
  justify-content: center;
  /* 水平置中 */
  align-items: center;
  /* 垂直置中 */
  gap: 15px;
  /* 項目之間个距離 */
  white-space: nowrap;
  overflow: hidden;
}

#summary-text-content {
  flex-grow: 1;
  /* Allow the text to take up available space */
  min-width: 0;
  /* Prevent text from overflowing its container */
  text-align: center;
  /* Keep text centered */
}

/* --- 夜間模式 (Dark Mode) 顏色設定 --- */
@media (prefers-color-scheme: dark) {
  :root {
    /* 覆蓋夜間模式下的主要文字顏色 */
    --main-text-color: #e0e0e0;
    /* 淺灰色，適合在暗色背景上閱讀 */
    /* 定義夜間模式的背景色 */
    --dark-background-color: #1f1f1f;
    /* 深灰色背景 (比 #121212 稍淺) */
    --dark-surface-color: #2c2c2c;
    /* 元件表面顏色 (例如表格行) */
    --dark-primary-accent: #678d3f;
    /* 暗模式下个主要強調色 (沿用四縣綠) */
    --dark-secondary-accent: #aa96b7;
    /* 暗模式下个次要強調色 (沿用 iMazinGrace-1) */
    --dark-link-color: #90caf9;
    /* 淺藍色連結 */
    --dark-button-text-color: #1f1f1f;
    /* 按鈕上个深色文字 */
    --dark-modal-background: #333;
    /* Modal 背景 */
    --dark-modal-text: #f5f5f5;
    /* Modal 文字 */
    --dark-active-border-color: #dc3545;
    /* 選中項目个紅色邊框 (保持) */
    --dark-active-bg-color: rgba(78, 106, 47, 0.77);
    /* 選中項目个背景 (改用較深个綠色) */
    --dark-now-playing-bg: rgba(var(--iMazinGrace-1-rgb), 0.4);
    /* 暗模式下做得稍為透明兜 */
    --dark-paused-yellow: rgba(var(--dark-paused-yellow-rgb), 0.5);
    /* 暗模式下个黃色，愛確定在深色背景看得清楚 */
    --dark-paused-yellow-rgb: 255, 255, 150;
    /* --- Focus Glow Variables (Dark Mode) --- */
    --focus-glow-color: rgba(96, 165, 250, 0.75);
    /* 暗夜模式用較亮、較飽和个藍色 */
    /* --focus-glow-blur and --focus-glow-spread 會承接 :root 个設定 */
    --popup-btn-bg: #343a40;
    --popup-btn-border: #495057;
    --popup-btn-text: #e9ecef;
    --popup-btn-bg-hover: #495057;
  }

  body {
    background-color: var(--dark-background-color);
    color: var(--main-text-color);
    /* 確保 body 文字顏色也套用 */
  }

  /* 確保所有子元素也繼承基本文字顏色 */
  body * {
    color: inherit;
    /* 繼承 body 設定个顏色 */
  }

  /* --- Loading Indicator Dark Mode --- */
  #loading-indicator {
    background-color: rgba(31, 31, 31, 0.95);
    /* Based on --dark-background-color */
  }

  #loading-text {
    color: var(--main-text-color);
  }

  .spinner {
    border-color: var(--dark-surface-color);
    border-top-color: #3498db;
    /* Keep the accent color */
  }

  /* --- 針對夜間模式調整 header 背景 --- */
  #header {
    background: rgba(40, 40, 40, 0.8);
    /* 深色半透明背景，透明度略增 */
    backdrop-filter: blur(8px);
    /* 加強模糊效果 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* 加一條細線分界 */
  }

  /* --- 調整表格偶數行背景 --- */
  tr:nth-child(even) {
    background-color: var(--dark-surface-color);
    /* 使用元件表面顏色 */
  }

  /* 確保表格文字顏色正確 */
  td {
    color: var(--main-text-color);
  }

  /* --- 調整連結顏色 --- */
  a {
    color: var(--dark-link-color);
  }

  /* --- 調整腔調區塊樣式 --- */
  .dialect {
    /* 背景色做得用較深个版本，或者調整透明度 */
    /* 這邊用 filter 稍微降低亮度同飽和度做示範 */
    filter: brightness(0.8) saturate(0.9);
    color: var(--main-text-color);
    /* 區塊內文字用淺色 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 加點邊框增加區別 */
    border-radius: 5px;
    /* 加圓角 */
  }

  .dialect>span[data-varname]>a {
    color: #fff;
    /* 腔調內連結用白色較清楚 */
  }

  /* 選中个腔調級別 */
  span[data-varname].active-dialect-level {
    /* 暗夜模式下用同樣个金色，但光暈做得較亮來確保對比 */
    border-color: #FFD700;
    box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.8);
    background-color: rgba(255, 255, 255, 0.25);
    /* 白色透明背景做得較亮一息仔 */
  }

  /* 確保 span[data-varname] 基本樣式在暗模式下也適用 */
  .dialect>span[data-varname] {
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }

  /* --- 調整 Radio Button 樣式 --- */
  .radioItem {
    background-color: transparent;
    /* 暗模式下毋需要背景色 */
    border: 2px solid var(--dark-surface-color);
    /* 用表面顏色做邊框 */
  }

  .radioButton {
    border-color: var(--dark-link-color);
    /* 外框用連結藍色 */
    background-color: var(--dark-surface-color);
    /* 未選中時用表面色 */
  }

  .radioButton:checked {
    background-color: transparent;
    /* 選中時透明 */
  }

  .radioButton:checked::after {
    border-color: var(--dark-link-color);
    /* 內圈也用連結藍色 */
    background-color: var(--dark-link-color);
    /* 內圈填滿 */
  }

  /* 選中个類別 */
  .radioItem.active-category {
    border-color: var(--dark-active-border-color);
    background-color: var(--dark-active-bg-color);
    /* 用定義个變數 */
  }

  /* --- 調整 Modal 背景和文字 --- */
  #autoplayModal {
    background-color: rgba(0, 0, 0, 0.85);
    /* 更深的背景 */
  }

  .modal-content {
    background-color: var(--dark-modal-background);
  }

  .modal-content>p {
    color: var(--dark-modal-text);
  }

  /* --- 調整其他可能有顏色衝突的元素 --- */
  .notes {
    color: #111;
    /* 備註文字用深色，因為背景是淺紫色 */
    background-color: var(--dark-secondary-accent);
    /* 背景色不變 */
  }

  #progressDetails a {
    color: var(--dark-link-color);
    /* 進度詳情連結 */
  }

  #progressDropdown {
    background-color: var(--dark-surface-color);
    color: var(--main-text-color);
    border-color: rgba(255, 255, 255, 0.2);
  }

  /* 播放控制按鈕 */
  #audioControls button i,
  button.playFromThisRow i {
    background: var(--dark-primary-accent);
    /* 主要強調色 */
    color: var(--dark-button-text-color);
    /* 按鈕文字用深色 */
    box-shadow: 2px 2px rgba(0, 0, 0, 0.4);
    /* 陰影加深 */
  }

  #audioControls button.ongoing i,
  button.playFromThisRow.ongoing i {
    background-color: #ffd700 !important;
    /* 黃色 */
    color: var(--dark-button-text-color);
  }

  #audioControls button.ended i,
  button.playFromThisRow.ended i {
    background-color: #b71c1c !important;
    /* 深紅色 */
    color: #fff;
    /* 結束時文字用白色 */
  }

  /* 回到頂部按鈕 */
  #backToTopBtn {
    background-color: rgba(255, 255, 255, 0.2);
    /* 半透明淺色 */
    color: var(--main-text-color);
  }

  #backToTopBtn:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }

  #backToTopBtn i {
    color: var(--main-text-color);
  }

  /* 【新增】暗黑模式循環按鈕樣式 */
  button#loopCategoryBtn.active i {
    background-color: #e67e22;
    /* 較亮的橘色 */
  }

  .loop-one-btn i {
    background: #9b59b6;
    /* 較亮的紫色 */
    box-shadow: 2px 2px #8e44ad;
  }

  .loop-one-btn.looping i {
    background-color: #e74c3c;
    /* 較亮的紅色 */
  }

  tr.looping-row {
    animation: pulse-dark-pink-effect 2s infinite ease-in-out;
  }

  @keyframes pulse-dark-pink-effect {
    0% {
      background-color: rgba(231, 76, 60, 0.4);
    }

    50% {
      background-color: rgba(231, 76, 60, 0.2);
    }

    100% {
      background-color: rgba(231, 76, 60, 0.4);
    }
  }


  /* 標音變調顏色調整 */
  #generated td:nth-of-type(2),
  .pronunciation-text {
    ruby.sandhi-高降變 {
      /* 修改 class 選擇器 */
      color: #FF8A80;
      /* 較亮个紅色 */
    }

    ruby.sandhi-中平變 {
      /* 修改 class 選擇器 */
      color: lightgreen;
      /* 較亮个橘色 */
    }

    ruby.sandhi-低升變 {
      /* 修改 class 選擇器 */
      color: #80CBC4;
      /* 較亮个藍綠色 */
    }
  }

  /* --- 暗夜模式下个 tr#nowPlaying 樣式 --- */
  tr#nowPlaying {
    background-color: var(--dark-now-playing-bg);
    /* transition 會承接外背个設定，毋使重複寫 */
  }

  /* --- 暗夜模式下个暫停狀態樣式 --- */
  tr#nowPlaying.paused-playback {
    /* background-color: var(--dark-paused-yellow); <-- 這行做得註解掉或拿掉 */
    animation: pulse-dark-yellow-effect 3s infinite ease-in-out;
    /* 應用暗夜模式个動畫 */
  }

  /* --- 暗夜模式下个選詞 Popup 樣式 --- */
  #selectionPopupBackdrop {
    background-color: rgba(0, 0, 0, 0.6);
    /* 暗夜模式用較深个背景 */
  }

  #selectionPopup {
    background-color: var(--dark-surface-color, #2c2c2c);
    /* 暗夜模式背景 */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
  }

  .popup-controls {
    /* 暗夜模式控制項容器 */
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .popup-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
    /* 暗夜模式分隔線 */
  }

  #selectionPopupCloseBtn {
    color: #aaa;
  }

  #selectionPopupCloseBtn:hover,
  #selectionPopupCloseBtn:focus-visible {
    color: #fff;
    /* 可選：加上同其他元素一樣个 focus glow (暗模式版本) */
    /* box-shadow: 0 0 var(--focus-glow-blur) var(--focus-glow-spread) var(--focus-glow-color); */
  }

  /* 暗夜模式 Toggle Switch */
  .popup-toggle-switch .toggle-label {
    color: var(--main-text-color);
  }

  .slider {
    background-color: #555;
    /* 暗模式下未選中背景 */
  }

  /* input:checked + .slider 已用 var(--focus-glow-color) */

  #selectionPopupContent li {
    /* border-bottom-color: rgba(255, 255, 255, 0.1); */
    /* 暫時拿掉底線 */
  }

  #selectionPopupContent li .pronunciation-source {
    color: #aaa;
    /* 暗模式下來源標示用較淺个灰色 */
  }

  #selectionPopupContent .popup-not-found {
    color: #bbb;
    /* 暗夜模式尋無訊息文字顏色 */
  }

  /* Accordion Dark Mode Styles */
  .accordion-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .accordion-header {
    color: var(--main-text-color);
  }

  .accordion-header:hover,
  .accordion-header.active {
    background-color: rgba(255, 255, 255, 0.08);
  }

  .accordion-header .pronunciation-source {
    color: #aaa;
  }

  .accordion-panel {
    background-color: var(--dark-surface-color, #2c2c2c);
    /* Slightly lighter than popup bg or same */
  }

  .accordion-panel p {
    color: var(--main-text-color);
  }

  /* Audio controls are generally handled by browser, might need specific styling if issues arise */

  #search-input {
    background-color: var(--dark-background-color, #1f1f1f);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--main-text-color);
  }

  #search-input:focus {
    background-color: #333;
  }

  #search-popup {
    background-color: var(--dark-surface-color, #2c2c2c);
    border-color: rgba(255, 255, 255, 0.15);
  }

  #dialect-selection:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  mark {
    background-color: var(--dark-primary-accent);
  }

  /* Brighter orange for dark mode accordion borders */
  tr.accordion-parent>td {
    border-top-color: #FFC107;
  }

  tr.accordion-parent>td:first-child,
  tr.accordion-row>td:first-child {
    border-left-color: #FFC107;
  }

  tr.accordion-parent>td:last-child,
  tr.accordion-row>td:last-child {
    border-right-color: #FFC107;
  }

  tr.accordion-row-last>td {
    border-bottom-color: #FFC107;
  }

  #generated tr.accordion-parent,
  #generated tr.accordion-row {
    border-left-color: #FFC107;
    border-right-color: #FFC107;
  }

  #generated tr.accordion-parent {
    border-top-color: #FFC107;
  }

  #generated tr.accordion-row-last {
    border-bottom-color: #FFC107;
  }
}

/* --- 響應式表格：疊起來个樣式 (螢幕闊度 <= 768px) --- */
@media screen and (max-width: 768px) {

  #generated table,
  #comparison-table {
    border: none;
    /* 移除表格外框 */
    width: 100%;
    /* 確保表格寬度 */
  }

  /* 隱藏傳統表格標頭 (雖然目前無用著 thead，但係留著較好) */
  #generated thead,
  #comparison-table thead {
    display: none;
  }

  #generated tr,
  #comparison-table tr {
    display: block;
    /* 分歸列變做區塊元素 */
    margin-bottom: 1.5em;
    /* 列之間个間距 */
    border: 1px solid rgba(var(--iMazinGrace-1-rgb, 170, 150, 183), 0.5);
    /* 加淡色框線，像卡片樣 */
    border-radius: 8px;
    /* 加圓角 */
    padding: 1em;
    /* 卡片內距 */
    /* background-color: rgba(var(--iMazinGrace-1-rgb, 170, 150, 183), 0.1); */
    /* <-- 移除通用背景色 */
  }

  /* 移除偶數行个特殊背景 */
  #generated tr:nth-child(even),
  #comparison-table tr:nth-child(even) {
    background-color: rgba(var(--iMazinGrace-1-rgb, 170, 150, 183), 0.1);
  }

  #generated td,
  #comparison-table td {
    display: block;
    /* 分儲存格變做區塊元素 */
    text-align: left !important;
    /* 強制靠左對齊 */
    padding-left: 15%;
    /* 留空間分標籤 */
    position: relative;
    /* 設定相對定位，分 ::before 好定位 */
    border-bottom: 1px dotted rgba(var(--iMazinGrace-1-rgb, 170, 150, 183), 0.3);
    /* 加底線分隔 */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    min-height: 2em;
    /* 確保有基本高度 */
    max-width: 90vw !important;
    /* 覆蓋原本个 max-width */
  }

  #generated td:last-child,
  #comparison-table td:last-child {
    border-bottom: none;
    /* 最尾一格毋使底線 */
  }

  /* 用 ::before 顯示標籤 */
  #generated td::before,
  #comparison-table td::before {
    content: attr(data-label);
    /* 讀取 data-label 內容 */
    position: absolute;
    left: 10px;
    /* 標籤靠左 */
    width: 10%;
    /* 標籤闊度 */
    padding-right: 10px;
    /* 標籤右邊留白 */
    font-weight: bold;
    white-space: nowrap;
    /* 標籤毋換行 */
    color: var(--main-text-color);
    /* 確保標籤顏色 */
    font-size: 0.7em;
    /* Aiuanyu：狹螢幕个 data-label 字毋使恁大 */
    /* 會㖸死，「真人寫个」還愛特別註明 */
  }

  /* 調整特定欄位个樣式 */
  #generated td.no,
  #comparison-table td.no {
    font-size: 1.1em;
    /* 編號做得放大一息仔 */
    padding-left: 10px;
    /* 編號毋使恁多左邊距 */
    text-align: left !important;
  }

  #generated td.no::before,
  #comparison-table td.no::before {
    display: none;
    /* 編號欄位毋使顯示 "編號：" 標籤 */
  }

  #generated td.no br,
  #comparison-table td.no br {
    display: none;
    /* 編號欄位毋使換行 */
  }

  /* 調整詞彙欄位个標音 */
  #generated td[data-label="詞彙"] ruby,
  #comparison-table td[data-label="詞彙"] ruby {
    font-size: 1.3em;
    /* 調整字體大小 */
  }

  #generated td[data-label="詞彙"] rt,
  #comparison-table td[data-label="詞彙"] rt {
    font-size: 0.8em;
    /* 標音相對縮小 */
  }

  /* 調整音檔控制項 */
  #generated audio.media,
  #comparison-table audio.media {
    max-width: 100%;
    /* 音檔控制項做得較闊 */
    /* height: auto; */
    /* <-- 移除 auto */
    height: 1em;
    /* <-- 設定固定高度 */
    margin-top: 5px;
  }

  /* 調整備註樣式 */
  #generated .notes,
  #comparison-table .notes {
    margin-top: 5px;
    margin-left: 5px;
    display: inline-block;
    /* 避免佔歸行 */
  }

  /* 調整播放按鈕 */
  #generated .playFromThisRow,
  #comparison-table .playFromThisRow {
    margin-left: 5px;
  }

  /* 確保 nowPlaying 樣式在卡片模式下正確應用 */
  #generated tr#nowPlaying,
  #comparison-table tr#nowPlaying {
    /* <-- 目標 tr#nowPlaying */
    background-color: rgba(var(--iMazinGrace-1-rgb), 0.5);
    /* <-- 明確重新設定背景色，莫 !important 啦！就係你造成動畫失效！ */
    transition: background-color 0.4s ease;
    /* <-- 也重新設定過渡效果 */
  }

  #generated tr#nowPlaying.paused-playback,
  #comparison-table tr#nowPlaying.paused-playback {
    /* background-color: transparent !important; */
    /* 動畫會處理背景 */
    animation: pulse-yellow-effect 3s infinite ease-in-out;
    /* <-- 拿忒 !important */
  }

  /* --- 新增：調整搜尋框在狹窄螢幕下的樣式 --- */
  #search-input {
    width: 50px !important;
    /* 再縮小預設寬度 */
    padding: 6px 10px;
    /* 縮小內距 */
    /* 字型大小已由主要規則中的 clamp() 處理 */
  }

  #search-input:focus {
    width: 150px !important;
    /* 再縮小 focus 時的寬度 */
  }


  /* 暗夜模式下个調整 */
  @media (prefers-color-scheme: dark) {

    #generated tr,
    #comparison-table tr {
      border-color: rgba(255, 255, 255, 0.2);
      background-color: var(--dark-surface-color);
    }

    #generated tr:nth-child(even),
    #comparison-table tr:nth-child(even) {
      /* background-color: var(--dark-surface-color); */
      /* <-- 移除通用背景色 */
    }

    #generated td,
    #comparison-table td {
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    #generated td::before,
    #comparison-table td::before {
      color: var(--main-text-color);
    }

    /* 確保 nowPlaying 樣式在暗夜卡片模式下正確應用 */
    #generated tr#nowPlaying,
    #comparison-table tr#nowPlaying {
      /* <-- 目標 tr#nowPlaying */
      background-color: var(--dark-now-playing-bg);
      /* <-- 明確重新設定暗夜背景色，加 !important */
      transition: background-color 0.4s ease;
      /* <-- 也重新設定過渡效果 */
    }

    #generated tr#nowPlaying.paused-playback,
    #comparison-table tr#nowPlaying.paused-playback {
      /* background-color: transparent !important; */
      animation: pulse-dark-yellow-effect 3s infinite ease-in-out;
      /* <-- 拿忒 !important */
    }

  }

  /* --- 新增：在狹窄螢幕下，若例句欄位為空，則不顯示 --- */
  #generated td.empty-sentence-cell,
  #comparison-table td.empty-sentence-cell {
    display: none;
  }

  #generated tr.accordion-row {
    display: block;
  }

}

/* --- Hide Romanizer on mobile devices based on JS detection --- */
.mobile-device #showRomanizerBtn,
.mobile-device #romanizerContainer,
.mobile-device #selectionPopupRomanizerBtn {
  display: none;
}

/* As a fallback, hide the Romaine button on small screens using a media query */
@media screen and (max-width: 768px) {

  #showRomanizerBtn,
  #romanizerContainer,
  #selectionPopupRomanizerBtn {
    display: none;
  }
}


/* --- 手機版查詞按鈕樣式 (Mobile Lookup Button Styles) --- */
#mobileLookupBtn {
  position: absolute;
  /* 用絕對定位，JS 會設定 top/left */
  z-index: 1000;
  /* 要在一般內容之上，但在 popup backdrop 之下 (若 backdrop z-index 更高) */
  background-color: #007bff;
  /* 範例：藍色背景 */
  color: white;
  border: none;
  border-radius: 5px;
  padding: 6px 12px;
  /* 調整內距 */
  font-size: 0.9em;
  /* 字體大小 */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  display: none;
  /* 初始隱藏，由 JS 控制顯示 */
  font-family: var(--title-font);
  /* 用返相同个標題字型 */
  line-height: 1.2;
  /* 調整行高避免圖示文字擠在一堆 */
}

#mobileLookupBtn i.fas.fa-search {
  margin-left: 5px;
  /* 圖示和文字之間加點距離 */
  color: white;
  /* 確保圖示顏色 */
}

/* 暗夜模式下的按鈕樣式 (可選) */
@media (prefers-color-scheme: dark) {
  #mobileLookupBtn {
    background-color: var(--dark-primary-accent, #678d3f);
    /* 用暗模式的主要強調色 */
    color: var(--dark-button-text-color, #1f1f1f);
    /* 按鈕文字顏色 */
  }

  #mobileLookupBtn i.fas.fa-search {
    color: var(--dark-button-text-color, #1f1f1f);
  }
}

/* Info Button in Header */
#infoButton,
#showRomanizerBtn,
#dataManagementBtn {
  background: none;
  border: none;
  color: var(--main-text-color);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  /* 同其他 header 控制項大細相近 */
  padding: 3px 3px;
  margin-left: 3px;
  /* 同 progressDetails 間隔 */
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  /* 避免被壓縮 */
}

#infoButton i,
#showRomanizerBtn i,
#dataManagementBtn i {
  color: inherit;
}

/* #infoButton focus-visible 效果會由全域 :focus-visible 處理 */
#infoButton:hover i,
#showRomanizerBtn:hover i,
#dataManagementBtn:hover i {
  /* 單獨處理 hover 效果 */
  color: var(--focus-glow-color);
  /* 用 focus 光暈色做 hover 效果 */
}

/* --- 【新增】雲端同步按鈕樣式 --- */
#cloudSyncBtn,
#cloudSyncLogoutBtn {
  background: none;
  border: none;
  color: var(--main-text-color);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  padding: 3px 3px;
  margin-left: 3px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  transition: color 0.2s ease-in-out;
}

#cloudSyncBtn i,
#cloudSyncLogoutBtn i {
  color: inherit;
}

#cloudSyncBtn:hover i,
#cloudSyncLogoutBtn:hover i {
  color: var(--focus-glow-color);
}

/* 雲端同步已登入狀態 */
#cloudSyncBtn.logged-in i {
  color: #28a745;
  /* 綠色表示已登入 */
}

/* 雲端同步中動畫 */
#cloudSyncBtn.syncing i {
  animation: spin 1s linear infinite;
  color: #ffc107;
  /* 黃色表示同步中 */
}

/* 同步成功提示 */
#cloudSyncBtn.sync-success i {
  color: #28a745;
  animation: pulse-success 0.5s ease-out;
}

/* 同步失敗提示 */
#cloudSyncBtn.sync-error i {
  color: #dc3545;
}

@keyframes pulse-success {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

/* 雲端同步使用者名稱 */
/* 雲端同步使用者按鈕（人頭 icon） */
#cloudSyncUserBtn {
  background: none;
  border: none;
  color: var(--main-text-color);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  padding: 3px;
  margin-left: 5px;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  /* 為了定位 tooltip */
}

#cloudSyncUserBtn:hover {
  color: var(--focus-glow-color);
}

/* Tooltip 樣式 (顯示使用者名稱) */
#cloudSyncUserBtn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  /* 顯示在下方 */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  /* 深色背景 */
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  white-space: nowrap;
  pointer-events: none;
  /* 避免擋住滑鼠 */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
  margin-top: 5px;
  /* 與 icon 的距離 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Hover 或 Focus 時顯示 Tooltip */
#cloudSyncUserBtn:hover::after,
#cloudSyncUserBtn:focus::after {
  opacity: 1;
}

/* 確保在 infoModal 標頭中顯示正常，避免被裁切 */
.modal-header-buttons {
  overflow: visible;
}

/* Modal Overlay Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1050;
  display: none;
  /* Hidden by default */
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-overlay.is-visible {
  display: flex;
  /* Shown when is-visible class is present */
}

/* Modal Dialog Specific Styles */
#infoModal .modal-dialog,
#whatsNewModal .modal-dialog {
  background-color: #fff;
  color: var(--main-text-color);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  width: 80vw;
  max-width: 900px;
  height: 80vh;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 避免 iframe 載入前內容溢出 */
}

#infoModal .modal-header,
#whatsNewModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.modal-header-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
}

#infoModal .modal-title,
#whatsNewModal .modal-title {
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
  font-family: var(--title-font);
  color: inherit;
}

#infoModal .modal-close-btn,
#whatsNewModal .modal-close-btn,
#romanizerContainer .modal-close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}

#infoModal .modal-close-btn:hover,
#infoModal .modal-close-btn:focus-visible,
#whatsNewModal .modal-close-btn:hover,
#whatsNewModal .modal-close-btn:focus-visible,
#romanizerContainer .modal-close-btn:hover,
#romanizerContainer .modal-close-btn:focus-visible {
  color: #333;
}

#infoModal .modal-body,
#whatsNewModal .modal-body {
  padding: 20px 30px;
  flex-grow: 1;
  overflow-y: auto;
  overflow-wrap: break-word;
  -webkit-overflow-scrolling: touch;
  line-height: 1.7;
}

/* Dark Mode for Modals */
@media (prefers-color-scheme: dark) {

  #infoButton,
  #showRomanizerBtn,
  #dataManagementBtn {
    color: var(--main-text-color);
  }

  #infoButton:hover i,
  #showRomanizerBtn:hover i,
  #dataManagementBtn:hover i {
    color: var(--focus-glow-color);
  }

  .modal-overlay {
    background-color: rgba(0, 0, 0, 0.75);
  }

  #infoModal .modal-dialog,
  #whatsNewModal .modal-dialog,
  #romanizerContainer .modal-dialog {
    background-color: var(--dark-surface-color, #2c2c2c);
  }

  #infoModal .modal-header,
  #whatsNewModal .modal-header,
  #dataManagementModal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }

  #infoModal .modal-close-btn,
  #whatsNewModal .modal-close-btn,
  #romanizerContainer .modal-close-btn,
  #dataManagementModal .modal-close-btn {
    color: #aaa;
  }

  #infoModal .modal-close-btn:hover,
  #infoModal .modal-close-btn:focus-visible,
  #whatsNewModal .modal-close-btn:hover,
  #whatsNewModal .modal-close-btn:focus-visible,
  #romanizerContainer .modal-close-btn:hover,
  #romanizerContainer .modal-close-btn:focus-visible,
  #dataManagementModal .modal-close-btn:hover,
  #dataManagementModal .modal-close-btn:focus-visible {
    color: #fff;
  }
}

/* --- Data Management Modal Styles --- */
#dataManagementModal .modal-dialog {
  background-color: #fff;
  color: var(--main-text-color);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  width: 90vw;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#dataManagementModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

#dataManagementModal .modal-title {
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
  font-family: var(--title-font);
  color: inherit;
}

#dataManagementModal .modal-close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}

#dataManagementModal .modal-close-btn:hover,
#dataManagementModal .modal-close-btn:focus-visible {
  color: #333;
}

#dataManagementModal .modal-body {
  padding: 20px 30px;
  overflow-y: auto;
  line-height: 1.6;
}

.data-section {
  margin-bottom: 25px;
}

.data-section:last-child {
  margin-bottom: 0;
}

.data-section h4 {
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--iMazinGrace-1);
  padding-bottom: 5px;
}

.data-section h4 i {
  margin-right: 8px;
}

.data-section p {
  font-size: 0.9em;
  margin-bottom: 15px;
}

#dataManagementModal textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  box-sizing: border-box;
  font-family: 'Operator Mono', monospace;
  font-size: 0.85em;
  margin-top: 10px;
}

#dataManagementModal button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

#dataManagementModal button:hover {
  background-color: #0056b3;
}

#importDataFile {
  display: block;
  margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {
  #dataManagementModal .modal-dialog {
    background-color: var(--dark-surface-color, #2c2c2c);
  }

  #dataManagementModal textarea {
    background-color: var(--dark-background-color, #1f1f1f);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--main-text-color);
  }

  #dataManagementModal button {
    background-color: var(--dark-link-color);
    color: var(--dark-button-text-color, #1f1f1f);
  }

  #dataManagementModal button:hover {
    background-color: #a9d6fc;
  }
}

/* iOS Autoplay Instruction Message Style */
tr.ios-autoplay-instruction td {
  background-color: rgba(var(--paused-yellow-rgb), 0.7);
  /* 用半透明个黃色做背景 */
  border: 1px solid var(--paused-yellow);
  border-radius: 6px;
  padding: 8px 12px !important;
  /* 覆蓋原本个 padding */
  text-align: center !important;
  /* 強制置中 */
  font-size: 0.9em;
  color: #333;
  /* 深色文字 */
  position: relative;
  /* 確保在堆疊模式下正常顯示 */
}

tr.ios-autoplay-instruction td::before {
  display: none !important;
  /* 毋使顯示 "編號：" 這兜標籤 */
}

/* Dark mode for iOS instruction */
@media (prefers-color-scheme: dark) {
  tr.ios-autoplay-instruction td {
    background-color: rgba(var(--dark-paused-yellow-rgb), 0.4);
    border-color: var(--dark-paused-yellow);
    color: var(--main-text-color);
  }
}

/* Info Modal Footer Styles */
#infoModal .modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
  flex-shrink: 0;
}

#infoModal .modal-footer label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9em;
  color: #212529;
}


#infoModal .modal-footer input[type="checkbox"] {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Dark Mode for Info Modal Footer */
@media (prefers-color-scheme: dark) {
  #infoModal .modal-footer {
    background-color: #343a40;
    border-top-color: rgba(255, 255, 255, 0.15);
  }

  #infoModal .modal-footer label {
    color: var(--main-text-color);
  }

  /* --- Dark Mode Commit Info in Modal --- */
  #commit-info-modal {
    color: #d0d0d0;
    background-color: rgba(255, 255, 255, 0.1);
  }

  #commit-info-modal a {
    color: #58a6ff;
  }
}

/* Info Settings Panel Styles */
.info-settings-panel {
  margin: 0 30px 20px 30px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.info-settings-panel summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 1.1em;
  user-select: none;
  list-style: none;
  color: #212529;
}

.info-settings-panel summary::-webkit-details-marker {
  display: none;
}

.info-settings-panel[open] summary {
  border-bottom: 1px solid #e0e0e0;
}

.settings-content {
  padding: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setting-info label {
  font-weight: 600;
  font-size: 1em;
  color: #212529;
  cursor: pointer;
}

.setting-description {
  font-size: 0.9em;
  color: #6c757d;
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #28a745;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 1px #28a745;
}

/* Dark Mode for Info Settings Panel */
@media (prefers-color-scheme: dark) {
  .info-settings-panel {
    background-color: #343a40;
    border-color: rgba(255, 255, 255, 0.15);
  }

  .info-settings-panel summary {
    color: var(--main-text-color);
  }

  .info-settings-panel[open] summary {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }

  .setting-info label {
    color: var(--main-text-color);
  }

  .setting-description {
    color: #adb5bd;
  }

  .toggle-slider {
    background-color: #6c757d;
  }
}

.source-tag {
  font-size: 0.8em;
  color: #666;
}

@media (prefers-color-scheme: dark) {
  .source-tag {
    color: #aaa;
  }
}

/* --- 學習面板樣式 (Learning Panel as details/summary) --- */
#learningSelectionPanel {
  border: 2px groove rgba(128, 128, 128, 0.5);
  padding: 0.5em 1em 1em;
  border-radius: 8px;
  margin-bottom: 1em;
}

#learningSelectionPanel summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.2em 0.5em;
  display: inline-block;
  /* 讓 padding 生效 */
}

#learningSelectionPanel summary:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

/* 隱藏 details 預設的箭頭 */
#learningSelectionPanel summary::-webkit-details-marker {
  display: none;
}

#learningSelectionPanel summary::marker {
  display: none;
}


/* --- 頁首查詢容器樣式 (Header Search Container) --- */
#search-container {
  position: relative;
  /* 設定相對定位，分彈出面板好用絕對定位 */
  margin-left: auto;
  /* 將查詢容器推到 flex 容器个最右片 */
}

/* --- 查詢輸入框 (Search Input) --- */
#search-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 15px;
  /* 圓角，看起來較幼秀 */
  width: 180px;
  /* 預設寬度 */
  font-size: clamp(16px, 1.8vw, 18px);
  /* 自動調整字型大小 */
  transition: width 0.3s ease-in-out, background-color 0.3s;
  /* 平滑過渡效果 */
}

#search-input:focus {
  width: 220px;
  /* focus 个時節變闊兜 */
  background-color: #f8f8f8;
  /* focus 个時節背景色小小愛變 */
}

/* --- 查詢設定彈出面板 (Search Settings Popup) --- */
#search-popup {
  display: none;
  /* 預設隱藏 */
  position: absolute;
  top: 100%;
  /* 在輸入框个正下方 */
  right: 0;
  /* 對齊輸入框个右邊 */
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* 加一息仔陰影，看起來有浮起來个效果 */
  z-index: 20;
  /* 確保在其他內容之上 */
  padding: 15px;
  width: 300px;
  /* 固定寬度 */
  margin-top: 5px;
  /* 同輸入框之間个距離 */
}

/* 用 JS 控制个 .active class 來顯示彈出面板 */
#search-container.active #search-popup {
  display: block;
}

/* --- 彈出面板內容 (Popup Content) --- */
.dialect-row {
  display: flex;
  /* 用 Flexbox 排版 */
  gap: 15px;
  /* 選項之間个距離 */
}

#dialect-selection,
#search-mode-selection {
  display: flex;
  flex-direction: column;
  /* 內容垂直排列 */
  gap: 8px;
  /* 項目之間个距離 */
}

/* 兩個區塊之間个分隔線 */
#dialect-selection:not(:last-child) {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 區塊標題文字 */
#dialect-selection p,
#search-mode-selection p {
  margin: 0 0 5px 0;
  font-weight: bold;
}

/* 區塊內个選項 */
#dialect-selection label,
#search-mode-selection label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* --- 查詢結果相關樣式 (Search Results) --- */
/* #results-summary is now a flex container, so this is handled above */

/* 搜尋結果頁面用个，來源標籤樣式 */
.source-tag {
  font-size: 0.8em;
  color: #666;
}

/* 關鍵字 highlight 樣式 */
mark {
  background-color: #ffda06;
  padding: 0.1em 0.2em;
  border-radius: 3px;
}


/* --- 暗夜模式調整 (Dark Mode Adjustments) --- */
@media (prefers-color-scheme: dark) {

  /* 查詢輸入框 */
  #search-input {
    background-color: var(--dark-background-color, #1f1f1f);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--main-text-color);
  }

  #search-input:focus {
    background-color: #333;
  }

  /* 彈出面板 */
  #search-popup {
    background-color: var(--dark-surface-color, #2c2c2c);
    border-color: rgba(255, 255, 255, 0.15);
  }

  /* 彈出面板內部分隔線 */
  #dialect-selection:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  /* 查詢結果頁面用个，來源標籤樣式 */
  .source-tag {
    color: #aaa;
  }

  /* 暗夜模式个關鍵字 highlight */
  mark {
    background-color: var(--dark-primary-accent);
    color: var(--dark-button-text-color, #1f1f1f);
  }

  #results-summary {
    background: rgba(20, 60, 50, 0.95);
    /* Darker shade of #245d48 */
    color: #f0f0f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* --- Pagination Container --- */
.pagination-container {
  text-align: center;
  margin-top: 20px;
}

.page-button {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
  margin: 0 4px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.page-button:hover {
  background-color: #ddd;
}

.page-button.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

/* --- Result Sequence Number --- */
.result-sequence-number {
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
  font-weight: bold;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0.5em;
  min-width: 40px;
  font-family: 'Bodoni 72 Oldstyle', serif;
  /* 使用 Bodoni Oldstyle 字型 */
}

@media (prefers-color-scheme: dark) {
  .result-sequence-number {
    background-color: #333;
    color: #f0f0f0;
  }
}


#infoModal .modal-body h1,
#infoModal .modal-body h2,
#infoModal .modal-body h3 {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  color: var(--main-text-color);
  /* 確保標題顏色與主題一致 */
}

#infoModal .modal-body h1 {
  font-size: 1.8rem;
  border-bottom: 2px solid var(--main-text-color);
  padding-bottom: 0.3em;
}

#infoModal .modal-body h2 {
  font-size: 1.5rem;
}

#infoModal .modal-body p,
#infoModal .modal-body li {
  font-size: 1rem;
  margin-bottom: 0.8em;
}

#infoModal .modal-body ul {
  padding-left: 25px;
  /* 讓清單項目有內縮 */
}

#infoModal .modal-body a {
  color: #007bff;
  /* 使用較亮的藍色讓連結更明顯 */
  text-decoration: underline;
}

#infoModal .modal-body a:hover {
  color: #0056b3;
}

#infoModal .modal-body hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 2em 0;
}


@media screen and (max-width: 768px) {
  .result-sequence-number {
    margin-right: 0.5em;
    /* 在小螢幕下，序號和內容之間的距離 */
  }
}

/* --- 查詢結果來源標籤 --- */
/*.source-tag {
  font-size: 0.8em;
  color: #666;
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
  margin-top: 4px;
}*/

/*.gip-source {
  background-color: #e0f2f1; /* 淡青色背景 */
/*  color: #00796b; /* 深青色文字 */
/*  border: 1px solid #b2dfdb;
}*/
/* --- Romanizer Styles --- */

/* --- 新增：Romanizer 互動式斷詞修正樣式 --- */

/* 確保 .segment-word 係定位基準 */
#segmentation-workspace .segment-word {
  position: relative;
}

/* 「重新斷詞」按鈕樣式 */
.resegment-btn {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  background-color: #dc3545;
  /* 紅色，表示有問題 */
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  /* 調整讓圖示置中 */
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* 預設隱藏 */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

/* 當滑鼠懸停在「多字元」且「無結果」个詞彙上時，顯示按鈕 */
/* (用 .multichar class 來輔助，這會由 JS 加上) */
#segmentation-workspace .segment-word.no-result.multichar:hover .resegment-btn {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* 原地編輯用个 input 輸入框樣式 */
.resegment-input {
  border: 1px solid #007bff;
  border-radius: 3px;
  padding: 1px 3px;
  font-size: inherit;
  /* 承襲字體大小 */
  font-family: inherit;
  /* 承襲字體 */
  background-color: #e7f3ff;
  /* 淡藍色背景，提示編輯中 */
  color: #333;
  outline: none;
}

/* --- 暗夜模式个對應樣式 --- */
@media (prefers-color-scheme: dark) {
  .resegment-btn {
    background-color: #f56565;
    /* 較亮个紅色 */
    color: #1a202c;
    border-color: #2d3748;
  }

  .resegment-input {
    background-color: #2a4365;
    border-color: #63b3ed;
    color: #e2e8f0;
  }
}

/* --- 新增：Romanizer 互動式音節樣式 --- */

/* 每一個音節个外層容器 */
.syllable-wrapper {
  position: relative;
  /* 設定相對定位，分絕對定位个按鈕有好个基準 */
  display: inline-block;
  /* 讓佢像文字樣排列，但有區塊特性 */
  border-radius: 3px;
  transition: background-color 0.2s ease;
  font-family: var(--roman-font);
  /* 【新】設定羅馬字字型 */
  /* 【舊】拿掉 padding 同 margin */
}

.segment-group,
.segment-group span[data-seg-id] {
  font-family: var(--roman-font);
  /* 乜愛設定字型 */
}

/* 大寫按鈕樣式 */
.uppercase-btn {
  position: absolute;
  /* 絕對定位，相對於 .syllable-wrapper */
  top: -8px;
  /* 移到頂高 */
  left: -8px;
  /* 移到左片 */
  width: 20px;
  height: 20px;
  background-color: #007bff;
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  /* 圓形按鈕 */
  cursor: pointer;
  font-family: sans-serif;
  /* 用較清晰个無襯線字體 */
  font-weight: bold;
  font-size: 12px;
  line-height: 18px;
  /* 調整讓 'U' 在垂直方向置中 */
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

  /* 預設隱藏按鈕 */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  /* 預設縮小 */
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

/* 當滑鼠懸停在音節容器上時，顯示按鈕 */
.syllable-wrapper:hover {
  background-color: rgba(0, 123, 255, 0.1);
  /* 淡淡个藍色背景 */
}

/* 刪除按鈕樣式 */
.delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: #dc3545;
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  cursor: pointer;
  /* 【新】為著配合 icon 調整 */
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.2s;
}

.syllable-wrapper:hover .uppercase-btn,
.syllable-wrapper:hover .delete-btn {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  /* 恢復正常大小 */
}

/* 【新】為由使用者從 popup 選用个讀音加上特別樣式 */
#romanizer-output .substituted-by-user {
  text-decoration: underline wavy #dc3545;
  /* 紅色波浪底線 */
  text-underline-offset: 3px;
  /* 分底線摎文字隔較開 */
}

/* 暗夜模式个對應樣式 */
@media (prefers-color-scheme: dark) {
  .syllable-wrapper:hover {
    background-color: rgba(144, 202, 249, 0.15);
    /* 暗夜模式个 hover 背景色 */
  }

  .uppercase-btn {
    background-color: var(--dark-link-color, #90caf9);
    color: var(--dark-background-color, #1f1f1f);
    border-color: var(--dark-surface-color, #2c2c2c);
  }
}

/* --- 新增：Romanizer 無結果預留位置樣式 --- */

/* 1. 樣式化「斷詞工作區」肚个無結果 span */
#segmentation-workspace .segment-word.no-result {
  /* 【新】淨保留背景色摎底線，分文字做得看著 */
  background-color: rgba(var(--iMazinGrace-1-rgb), 0.2);
  border-bottom: 2px dotted var(--iMazinGrace-1);
  color: #777;
}

#segmentation-workspace .segment-word.no-result:hover {
  background-color: #c4b5d0;
  /* 滑鼠懸停時个顏色 */
}

/* 2. 建立分「最終結果區」用个獨立 placeholder class */
.placeholder-block {
  display: inline-block;
  width: 3em;
  height: 1.2em;
  /* 這高度做得根據你个行高微調 */
  background-color: var(--iMazinGrace-1);
  border-radius: 4px;
  vertical-align: middle;
  /* 垂直置中 */
}

/* --- 暗夜模式个對應樣式 --- */
@media (prefers-color-scheme: dark) {
  #segmentation-workspace .segment-word.no-result {
    background-color: var(--dark-secondary-accent);
  }

  #segmentation-workspace .segment-word.no-result:hover {
    background-color: #8a7899;
  }

  .placeholder-block {
    background-color: var(--dark-secondary-accent);
  }
}

/* --- 新增：Romanizer 歷史紀錄控制項樣式 --- */
#romanizer-history-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  /* 同下背个 output 區隔開 */
}

#romanizer-history-controls button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 1em;
  color: #333;
}

#romanizer-history-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 暗夜模式 */
@media (prefers-color-scheme: dark) {
  #romanizer-history-controls button {
    background-color: #444;
    border-color: #666;
    color: #ddd;
  }

  #romanizer-history-controls button:disabled {
    opacity: 0.4;
  }
}


#romanizerContainer .modal-dialog {
  background-color: #fff;
  color: var(--main-text-color);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  width: 80vw;
  max-width: 900px;
  height: 85vh;
  /* Set height to enable scrolling */
  max-height: 800px;
  /* Set max-height */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Make the dialog itself scroll */
}

#romanizerContainer .romanizer-content {
  background-color: transparent;
  /* Now handled by modal-dialog */
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Allow content to fill dialog */
}

/* 【新增】Romanizer 連詞模式選擇器樣式 */
#romanizer-dialect-selector,
#romanizer-joining-mode-selector {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-family: inherit;
}

#romanizer-joining-mode-selector {
  margin-left: 10px;
}

/* 【新增】對應个暗夜模式樣式 */
@media (prefers-color-scheme: dark) {

  #romanizer-dialect-selector,
  #romanizer-joining-mode-selector {
    background-color: var(--dark-surface-color, #2c2c2c);
    color: var(--main-text-color);
    border-color: rgba(255, 255, 255, 0.2);
  }
}

#romanizerContainer .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-shrink: 0;
  flex-wrap: wrap;
  /* 允許換行 */
}

#romanizerContainer .modal-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#romanizer-output-container {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#romanizer-output {
  font-family: var(--roman-font);
  font-weight: 700;
  font-size: 1.2em;
  flex-grow: 1;
  min-height: 1.5em;
  /* Ensure it has some height even when empty */
}

#copy-romanizer-result-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 10px;
}

#segmentation-workspace {
  border: 1px dashed #ccc;
  padding: 15px;
  flex-grow: 1;
  margin-bottom: 15px;
  line-height: 2.5;
}

#segmentation-workspace .segment-word {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

#segmentation-workspace .segment-word:hover {
  background-color: #f0f0f0;
}

#segmentation-workspace .segment-word.completed {
  background-color: #d4edda;
  /* Light green */
  border-bottom: 2px solid #155724;
  /* Darker green */
}

.romanizer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

#romanizer-input {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  box-sizing: border-box;
  /* Fix width overflow */
}

#romanizer-start-btn {
  padding: 10px 15px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  align-self: flex-end;
}

#romanizer-start-btn:hover {
  background-color: #0056b3;
}

#segmentation-workspace .segment-word.auto-filled-multiple {
  background-color: #fffacd;
  /* LemonChiffon */
  border-bottom: 2px solid #ffd700;
  /* Gold */
}

#segmentation-workspace .segment-word.no-result {
  background-color: rgba(var(--iMazinGrace-1-rgb), 0.2);
  border-bottom: 2px dotted var(--iMazinGrace-1);
  color: #777;
}

/* --- Dark Mode for Romanizer Container --- */
@media (prefers-color-scheme: dark) {
  #romanizerContainer .romanizer-content {
    background-color: var(--dark-surface-color, #2c2c2c);
    color: var(--main-text-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  #romanizer-output-container,
  #romanizer-input,
  #segmentation-workspace {
    background-color: var(--dark-background-color, #1f1f1f);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--main-text-color);
  }

  #copy-romanizer-result-btn {
    background: var(--dark-surface-color, #2c2c2c);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--main-text-color);
  }

  #copy-romanizer-result-btn:hover {
    background-color: #444;
  }


  #segmentation-workspace .segment-word:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  #segmentation-workspace .segment-word.completed {
    background-color: #2a4b37;
    /* Darker green */
    border-bottom-color: #6fa883;
    /* Lighter green for border */
    color: #e0e0e0;
  }

  #romanizer-start-btn {
    background-color: var(--dark-primary-accent, #678d3f);
    color: var(--dark-button-text-color, #1f1f1f);
  }

  #romanizer-start-btn:hover {
    background-color: #85b567;
    /* Lighter shade of the accent color */
  }

  #segmentation-workspace .segment-word.auto-filled-multiple {
    background-color: #5a5a22;
    border-bottom-color: #ffd700;
    color: #fff;
  }

  #segmentation-workspace .segment-word.no-result {
    background-color: rgba(var(--iMazinGrace-1-rgb), 0.3);
    border-bottom-color: var(--iMazinGrace-1);
    color: #aaa;
  }
}

/* --- Romanizer Header 響應式設計 --- */
@media screen and (max-width: 768px) {
  #romanizerContainer .modal-header {
    /* 在狹窄螢幕，改做從頭開始對齊，分 h2 好看 */
    justify-content: flex-start;
    gap: 10px;
    /* 加入項目之間个間距 */
  }

  #romanizerContainer .modal-header h2 {
    /* 分標題佔用歸行个闊度，佢就會自動跳到第一行 */
    flex-basis: 100%;
    /* 拿掉 h2 預設个 margin，避免影響排版 */
    margin: 0 0 10px 0;
    /* 文字做得靠左或置中，看你歡喜哪一樣 */
    text-align: left;
  }

  #romanizerContainer .modal-header .modal-close-btn {
    /* 將關閉按鈕推到最右片 */
    margin-left: auto;
  }
}

/* --- Migration Overlay Styles --- */
#migration-overlay {
  background-color: #f0f2f5;
  overflow-y: auto;
  align-items: flex-start;
}

.migration-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  max-width: 900px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-align: center;
}

.migration-image {
  max-width: 250px;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  object-fit: cover;
}

.migration-text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.migration-container h1 {
  font-size: 1.8em;
  margin-bottom: 0.5em;
}

.migration-container p {
  margin: 0.5em 0;
  font-size: 1.1em;
  color: #333;
}

.migration-container a {
  color: #007bff;
  text-decoration: none;
}

.migration-container a:hover {
  text-decoration: underline;
}

#migrationBtn {
  font-family: 'tauhu-oo', sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  padding: 0.8em 1.5em;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 1em;
}

#migrationBtn:hover {
  background-color: #0056b3;
}

@media (min-width: 600px) {
  .migration-container {
    flex-direction: row;
    text-align: left;
  }

  .migration-text-content {
    align-items: flex-start;
  }

  .migration-image {
    max-width: 350px;
  }

  .migration-container h1 {
    font-size: 2.2em;
  }
}

@media (max-width: 400px),
(max-height: 760px) {
  .migration-container {
    padding: 1em;
    gap: 1em;
  }

  .migration-image {
    max-width: 200px;
  }

  .migration-container h1 {
    font-size: 1.5em;
  }

  .migration-container p {
    font-size: 1em;
  }

  #migrationBtn {
    font-size: 1em;
    padding: 0.6em 1.2em;
  }
}

@media (prefers-color-scheme: dark) {
  #migration-overlay {
    background-color: var(--dark-background-color);
  }

  .migration-container {
    background-color: var(--dark-surface-color);
    padding: 2em;
    border-radius: 12px;
  }

  .migration-container h1 {
    color: var(--main-text-color);
  }

  .migration-container p {
    color: var(--main-text-color);
    opacity: 0.85;
  }

  .migration-container a {
    color: var(--dark-link-color);
  }

  #migrationBtn {
    background-color: var(--dark-link-color);
    color: var(--dark-button-text-color);
  }

  #migrationBtn:hover {
    background-color: #a9d6fc;
  }

  .migration-image {
    border: 2px solid var(--dark-surface-color);
  }
}