@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);
  }
}


: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;
}

/* 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 */
#generated td:nth-of-type(2) {
  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;
    }
  }
  ruby.sandhi-高降變 { /* 修改 class 選擇器 */
    color: red;
  }
  ruby.sandhi-中平變 { /* 修改 class 選擇器 */
    color: orangered;
  }
  ruby.sandhi-低升變 { /* 修改 class 選擇器 */
    color: blue;
  }
}
.sentence rt {
  font-size: 70%;
}

body {
  font-size: 20px;
}
body,
body * {
  font-family: Iansui, '霞鶩文楷 TC', 'LXGW WenKai', tauhu-oo, serif;
  line-height: 1.8em;
  color: var(--main-text-color);
}
/*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: 8px 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 i {
  color: var(--iMazinGrace-1) !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, 30px);
  /* 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;
}
.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: 2px solid #dc3545; /* 紅色邊框 */
  border-radius: 8px;       /* 圓角 */
  padding: 3px 6px;         /* 微調內距，讓框線不要太貼近文字 */
  background-color: rgba(220, 53, 69, 0.5); /* 新增：淡淡的紅色背景 (紅底效果) */
  box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); /* 可選：加上淡淡的紅色光暈 */
  /* 確保背景色和文字顏色不受影響或按需調整 */
}
/* --- 新增：為 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: 1001; /* 比其他內容高，比 popup 低 */
  /* 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: 1002; /* 比 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 { /* 新增：控制項容器 */
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 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 {
  background-color: transparent;
  color: var(--main-text-color);
  cursor: pointer;
  padding: 12px 5px; /* Reduced horizontal padding */
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
  font-size: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--title-font); /* Ensure consistent font */
}

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

.accordion-header .pronunciation-text { /* For the main pronunciation text */
  flex-grow: 1;
  font-family: var(--roman-font);
  font-weight: 700;
}

.accordion-header .pronunciation-source { /* Keep source style */
  font-size: 0.85em;
  color: #777;
  margin-left: 8px;
  margin-right: 10px; /* Space before indicator */
}

.accordion-header .indicator {
  font-size: 1.2em;
  font-weight: bold;
}

.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;
}
.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: 12px 20px;
  margin-bottom: 10px;
  z-index: 5;
  font-weight: bold;
  
  /* Flexbox 佈局 */
  justify-content: center; /* 水平置中 */
  align-items: center;    /* 垂直置中 */
  gap: 15px;              /* 項目之間个距離 */
}

/* --- 夜間模式 (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 个設定 */
  }

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

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

  /* --- 針對夜間模式調整 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: var(--dark-active-border-color);
    background-color: rgba(220, 53, 69, 0.3); /* 背景透明度降低 */
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.6); /* 光暈加強 */
  }
   /* 確保 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);
  }

  /* 標音變調顏色調整 */
  #generated td:nth-of-type(2) ruby.sandhi-高降變 { /* 修改 class 選擇器 */
    color: #FF8A80; /* 較亮个紅色 */
  }
  #generated td:nth-of-type(2) ruby.sandhi-中平變 { /* 修改 class 選擇器 */
    color: #FFCC80; /* 較亮个橘色 */
  }
  #generated td:nth-of-type(2) 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);
  }
}

/* --- 響應式表格：疊起來个樣式 (螢幕闊度 <= 768px) --- */
@media screen and (max-width: 768px) {
  #generated table {
    border: none; /* 移除表格外框 */
    width: 100%; /* 確保表格寬度 */
  }

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

  #generated 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) {
    background-color: rgba(var(--iMazinGrace-1-rgb, 170, 150, 183), 0.1);
  }

  #generated 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 {
    border-bottom: none; /* 最尾一格毋使底線 */
  }

  /* 用 ::before 顯示標籤 */
  #generated 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 {
    font-size: 1.1em; /* 編號做得放大一息仔 */
    padding-left: 10px; /* 編號毋使恁多左邊距 */
    text-align: left !important;
  }
  #generated td.no::before {
     display: none; /* 編號欄位毋使顯示 "編號：" 標籤 */
  }
  #generated td.no br {
    display: none; /* 編號欄位毋使換行 */
  }

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

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

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

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

  /* 確保 nowPlaying 樣式在卡片模式下正確應用 */
  #generated 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 {
    /* 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 {
      border-color: rgba(255, 255, 255, 0.2);
      background-color: var(--dark-surface-color);
    }
    #generated tr:nth-child(even) {
       /* background-color: var(--dark-surface-color); */ /* <-- 移除通用背景色 */
    }
    #generated td {
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    #generated td::before {
      color: var(--main-text-color);
    }

    /* 確保 nowPlaying 樣式在暗夜卡片模式下正確應用 */
    #generated tr#nowPlaying { /* <-- 目標 tr#nowPlaying */
        background-color: var(--dark-now-playing-bg); /* <-- 明確重新設定暗夜背景色，加 !important */
        transition: background-color 0.4s ease; /* <-- 也重新設定過渡效果 */
    }
    #generated tr#nowPlaying.paused-playback {
      /* background-color: transparent !important; */
      animation: pulse-dark-yellow-effect 3s infinite ease-in-out; /* <-- 拿忒 !important */
    }
  }
  /* --- 新增：在狹窄螢幕下，若例句欄位為空，則不顯示 --- */
  #generated td.empty-sentence-cell {
    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 {
  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 {
  color: inherit;
}
/* #infoButton focus-visible 效果會由全域 :focus-visible 處理 */
#infoButton:hover i { /* 單獨處理 hover 效果 */
  color: var(--focus-glow-color); /* 用 focus 光暈色做 hover 效果 */
}

/* Info Modal Styles */
#infoModal.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 1050; /* 比 selectionPopup 高 */
  display: none; /* 預設隱藏 */
  align-items: center;
  justify-content: center;
  padding: 20px; /* 針對細螢幕加 padding */
  box-sizing: border-box;
}

#infoModal .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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

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

#infoModal .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 {
  color: #333;
}

#infoModal .modal-body {
  padding: 0; /* iframe 內容由 info.html 自行處理 padding */
  flex-grow: 1;
  overflow: hidden; /* iframe 容器 */
  -webkit-overflow-scrolling: touch; /* iOS iframe 內容順暢捲動 */
}

#infoModal .modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Dark Mode for Info Modal */
@media (prefers-color-scheme: dark) {
  #infoButton {
    color: var(--main-text-color);
  }
  #infoButton:hover i {
    color: var(--focus-glow-color);
  }

  #infoModal.modal-overlay {
    background-color: rgba(0, 0, 0, 0.75);
  }
  #infoModal .modal-dialog {
    background-color: var(--dark-surface-color, #2c2c2c);
  }
  #infoModal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
  #infoModal .modal-close-btn {
    color: #aaa;
  }
  #infoModal .modal-close-btn:hover,
  #infoModal .modal-close-btn:focus-visible {
    color: #fff;
  }
}

/* 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 {
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
  background-color: #f8f9fa;
  flex-shrink: 0;
  text-align: left;
}

#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);
  }
}

.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;
  }
}

/* --- Info Modal Styles --- */
#infoModal .modal-body {
  max-height: 70vh; /* 設定最大高度，例如視窗高度的 70% */
  overflow-y: auto; /* 當內容超過最大高度時，顯示垂直捲動軸 */
  padding: 20px 30px; /* 增加內距，上下 20px，左右 30px */
  line-height: 1.7; /* 調整行高以利閱讀 */
}

#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;
}*/