/* --- 全域與基本樣式 (Global & Base Styles) --- */
* {
  font-family: twhei-s, TWHEI, "台灣黑體", tauhu-oo, PingFangTC-Regular, "Microsoft JhengHei", sans-serif;
}

/* --- 主要佈局容器 (Main Layout Containers) --- */
.search-container {
  position: relative;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 50;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  z-index: 50;
}



/* --- 卡片元件 (Card Components) --- */

#categoryList {
  margin-top: 1rem; /* 16px */
}

/* 主題卡片 (Category Card) */
.category-card {
  position: relative;
  transition: all 0.2s ease;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-card.checkbox-selected {
  background-color: #dbeafe; /* blue-100 */
  border-color: #3b82f6; /* blue-500 */
}

/* 主題卡片標題 (讓標題可點擊) */
.category-card.checkbox-selected h3 {
  color: #2563eb; /* blue-600 */
}




/* 主題卡片選擇指示器 (打勾圖示) */
.category-card .category-checkbox {
  display: none; /* 隱藏原始 checkbox */
}

.selection-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #9ca3af; /* gray-400 */
  opacity: 0;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}



.category-card.checkbox-selected .selection-indicator {
  opacity: 1;
  transform: scale(1);
  color: white;
  background-color: #3b82f6; /* blue-500 */
}

/* --- 新增：多選模式下的樣式 --- */

/* 預設隱藏選取指示器 */
.selection-indicator {
    opacity: 0;
}

/* 在多選模式下，顯示指示器 */
.multi-select-active .selection-indicator {
    opacity: 1;
}

/* 在多選模式下，滑鼠懸浮時的指示器樣式 */
.multi-select-active .category-card:hover .selection-indicator {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.7);
}

/* 在多選模式下，已選取項目的指示器樣式 */
.multi-select-active .category-card.checkbox-selected .selection-indicator {
    transform: scale(1);
    color: white;
    background-color: #3b82f6; /* blue-500 */
}


/* 句子卡片 (Sentence Card) */
.sentence-card {
  transition: all 0.2s ease;
}

.sentence-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- 按鈕元件 (Button Components) --- */

/* 閃卡底部控制按鈕 (小) */
.control-btn {
  @apply p-3 text-gray-500 rounded-full hover:bg-gray-100 hover:text-gray-800 transition-colors;
}
.control-btn .material-icons {
  @apply text-3xl;
}
.control-btn:disabled {
  @apply text-gray-300 cursor-not-allowed hover:bg-transparent;
}
.control-btn.active {
  @apply text-purple-600 bg-purple-100;
}
.control-btn.active .material-icons {
  font-variation-settings: 'FILL' 1; /* 啟用時圖示填滿 */
}


/* 學習模式、閃卡模式 */
.control-button.active,
.control-btn.active {
  @apply bg-blue-100 text-blue-700;
}

/* 配對、測驗、排序遊戲工具列按鈕 */
.mode-toolbar button.bg-blue-100 {
  color: #1d4ed8; /* blue-700 */
}


/* 閃卡中間播放按鈕 (大) */
.control-btn-main {
  @apply p-5 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 transition-all transform hover:scale-105;
}
.control-btn-main .material-icons {
  @apply text-4xl;
}

/* 閃卡彈出選單內的練習模式按鈕 */
.practice-mode-btn {
  @apply w-full px-3 py-1.5 text-sm font-semibold rounded-md transition-colors text-gray-600;
}
.practice-mode-btn.active {
  @apply bg-purple-100 text-purple-700;
}
.practice-mode-btn:disabled {
  @apply text-gray-400 cursor-not-allowed hover:bg-transparent;
}

/* 閃卡頂部設定按鈕 */
.setting-btn {
  @apply p-2 rounded-md hover:bg-gray-200 text-gray-500 transition-colors flex items-center justify-center;
}
.setting-btn .material-icons {
    @apply text-xl;
}

/* 閃卡頂部彈出式選單內的選項 */
.setting-menu-item {
  @apply w-full text-left px-4 py-2.5 flex items-center text-sm text-gray-700 hover:bg-gray-100;
}

.setting-menu-item.active {
  @apply text-purple-700 bg-purple-50;
}

/* 星號按鈕 */
.star-button {
  transition: all 0.2s ease;
}
.star-button.starred {
  color: #fbbf24; /* amber-400 */
}
/* 星號按鈕啟用時，讓圖示填滿 */
#starCard .material-icons.text-yellow-400 {
    font-variation-settings: 'FILL' 1;
}

/* --- 文字與排版工具 (Text & Spacing Utilities) --- */
.line-spacing-tight { line-height: 1.2; }
.line-spacing-normal { line-height: 1.5; }
.line-spacing-loose { line-height: 1.8; }

.blur-text {
  filter: blur(8px);
  opacity: 0.3;
  transition: all 0.3s ease;
}

.hidden-text {
  display: none;
}

.invisible-placeholder {
  visibility: hidden;
  pointer-events: none;
}


/* --- 遊戲模式專用樣式 (Game-Specific Styles) --- */

/* 禁用遊戲區域 */
.game-area-disabled {
    pointer-events: none; /* 讓元素無法被滑鼠點擊 */
    opacity: 0.6;         /* 視覺上變淡，表示已禁用 */
}
/* 配對遊戲 (Matching Game) */
.matching-item {
  transition: all 0.2s ease;
  border: 2px solid #d1d5db; /* gray-300 */
  position: relative;
}

.matching-selected {
  border-color: #3b82f6; /* blue-500 */
  background-color: #dbeafe; /* blue-100 */
}

.matching-correct {
  border-color: #10b981; /* green-500 */
  background-color: #d1fae5; /* green-100 */
}

.matching-incorrect {
  border-color: #ef4444; /* red-500 */
  background-color: #fee2e2; /* red-100 */
}

.matching-completed {
  background-color: #f3f4f6; /* gray-100 */
  color: #6b7280; /* gray-500 */
  border-color: #d1d5db; /* gray-300 */
}

/* 測驗遊戲 (Quiz Game) */
.quiz-option {
  transition: all 0.2s ease;
  border: 2px solid #e5e7eb; /* gray-200 */
  box-shadow: none;
}

.quiz-option:hover:not(.quiz-answered) {
  border-color: #6b7280; /* gray-500 */
  background-color: #f9fafb; /* gray-50 */
}

.quiz-correct {
  border-color: #10b981; /* green-500 */
  background-color: #d1fae5 !important; /* green-100 */
}

.quiz-incorrect {
  border-color: #ef4444; /* red-500 */
  background-color: #fee2e2 !important; /* red-100 */
}

.quiz-answered {
  pointer-events: none;
}

.quiz-vertical .quiz-option {
  padding: 8px 16px;
  display: block;
  width: 100%;
  margin-bottom: 8px;
}

.quiz-horizontal .quiz-option {
  padding: 16px 24px;
}


/* 排序遊戲 (Sorting Game) */
.sorting-word {
  transition: all 0.3s ease;
  cursor: grab;
}

.sorting-word:active {
  cursor: grabbing;
}

.sorting-word:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* --- 通用進度條 (General Progress Bar) --- */
.timer-bar {
  transition: width 1s linear;
}

/* --- 動畫效果 (Animations) --- */

.celebration {
  animation: celebration 0.8s ease-out;
}

@keyframes celebration {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.emoji-celebration {
  position: fixed;
  font-size: 2rem;
  pointer-events: none;
  z-index: 1000;
  animation: emojiFloat 2s ease-out forwards;
}

@keyframes emojiFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(1.5);
  }
}



/* 搜尋遮罩層 */
#searchOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 35; /* 必須比 header(z-40) 低，比內容高 */
}


/* 針對手機螢幕 (寬度小於 768px) */
@media (max-width: 767px) {
  
  /* 加大手機版搜尋輸入框的文字 */
  #mobileSearchInput {
    font-size: 1.1rem; /* 17.6px */
  }

  /* 調整搜尋結果列表的高度與位置 */
  .search-results {
    /* 將頂部位置調整到 header 下方約 70px */
    top: 70px;
    /* 計算最大高度，使其距離底部保留 50px */
    max-height: calc(100vh - 70px - 50px); 
  }

  /* 加大搜尋結果項目的文字 */
  .search-result-item .font-semibold {
     font-size: 1.05rem; /* 16.8px */
  }
   .search-result-item .text-sm {
     font-size: 0.9rem; /* 14.4px */
  }

  /* 通用工具列調整：縮小整體留白和元件間距 */
  .mode-toolbar {
    padding-left: 0.5rem !important;  /* 8px */
    padding-right: 0.5rem !important; /* 8px */
    padding-top: 0.5rem !important;    /* 8px */
    padding-bottom: 0.5rem !important; /* 8px */
    gap: 0.5rem 0.25rem !important;    /* 垂直間距8px, 水平間距4px */
  }

  /* 縮小工具列內的按鈕和選單的內距與字級 */
  .mode-toolbar button,
  .mode-toolbar select {
    padding: 0.375rem 0.5rem; /* 6px 8px */
    font-size: 0.875rem;     /* 14px */
  }
  .mode-toolbar select {
    padding-right: 0.5rem; /* 確保選單箭頭不會被蓋住 */
  }

  /* 特別處理純圖示按鈕，使其為方形 */
  .mode-toolbar button.p-2 {
     padding: 0.375rem; /* 6px */
  }
  
  /* 縮小圖示尺寸 */
  .mode-toolbar .material-icons {
    font-size: 1.25rem !important; /* 20px */
  }

  /* 調整工具列內群組的間距 */
  .mode-toolbar > div {
     gap: 0.25rem; /* 4px */
  }
  
  /* 遊戲設定選項群組的間距 */
  .mode-toolbar #matchingOptions,
  .mode-toolbar #quizOptionsContainer,
  .mode-toolbar #sortingOptions {
    gap: 0.375rem; /* 6px */
  }
  
  /* 學習模式的文字按鈕，縮小左右內距 */
  .mode-toolbar button.px-3 {
    padding-left: 0.5rem;  /* 8px */
    padding-right: 0.5rem; /* 8px */
  }
  
  /* 學習模式中，在小螢幕隱藏按鈕文字，只保留圖示以節省空間 */
  .mode-toolbar #hideHakka span:last-child,
  .mode-toolbar #hidePinyin span:last-child,
  .mode-toolbar #hideChinese span:last-child {
    align-items: left;
  }

}


/* --- 閃卡內部樣式微調 (Flashcard Internal Style Tweaks) --- */

/* 讓閃卡內部的控制按鈕顏色變淡，減少視覺干擾 */
#flashcardContainer .control-btn,
#flashcardContainer .setting-btn {
  color: #9ca3af; /* gray-400 */
}
#flashcardContainer .control-btn:hover,
#flashcardContainer .setting-btn:hover {
  color: #4b5563; /* gray-600 */
  background-color: #f3f4f6; /* gray-100 */
}
#flashcardContainer .control-btn:disabled,
#flashcardContainer .setting-btn:disabled {
  color: #d1d5db; /* gray-300 */
  background-color: transparent;
}


/* 閃卡內部的「跳至首張/末張」按鈕樣式 */
.card-nav-btn {
  position: absolute;
  bottom: 1rem; /* 距離底部 16px */
  opacity: 0; /* 預設隱藏 */
  transform: translateY(10px);
  transition: all 0.2s ease-in-out;
  
  @apply p-2 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-600;
}

/* 當滑鼠移到閃卡上時，顯示導航按鈕 */
#flashcardContainer:hover .card-nav-btn {
  opacity: 1;
  transform: translateY(0);
}

.card-nav-btn.left-4 {
  left: 1rem; /* 距離左側 16px */
}

.card-nav-btn.right-4 {
  right: 1rem; /* 距離右側 16px */
}

.card-nav-btn:disabled {
  @apply text-gray-300 cursor-not-allowed hover:bg-transparent pointer-events-none;
}


#repeatBtn.active {
  color: #1f2937; /* gray-800 */
  background-color: #e5e7eb; /* gray-200 */
}


.learning-star-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af; /* gray-400 */
  transition: color 0.2s ease;
}

.learning-star-btn:hover {
  color: #fbbf24; /* amber-400 */
}

/* 讓圖示尺寸與周圍文字大小保持相對一致 */
.learning-star-btn .material-icons {
  font-size: 1.25em; 
}

/* 當星號被標記時 (JS會加上text-yellow-400)，將圖示填滿 */
.learning-star-btn .material-icons.text-yellow-400 {
  font-variation-settings: 'FILL' 1;
}

.category-card.checkbox-selected.selected-border {
    border: 2px solid theme('colors.blue.500'); /* 使用 Tailwind CSS 的藍色作為邊框 */
    box-shadow: 0 0 0 3px theme('colors.blue.200'); /* 可選：增加一個更寬的陰影效果 */
}

/* --- 學習模式選取功能樣式 --- */

/* 預設隱藏句子的核取方塊 */
.sentence-checkbox {
    display: none;
}

/* 當啟用選取模式時 (父層容器有 .learning-select-active class)，顯示核取方塊 */
.learning-select-active .sentence-checkbox {
    display: block;
}

/* 讓學習模式的按鈕有更一致的大小 */
#learningModeToolbar .control-button {
    @apply p-2 rounded-md hover:bg-gray-200 transition-colors flex items-center gap-2;
}

/* 讓啟用選取後的按鈕有作用中的感覺 */
#learningModeToolbar .control-button.active {
    @apply bg-blue-100 text-blue-700;
}

/* --- 主題詳情頁下拉選單 (Category Detail Dropdown) --- */
.category-dropdown-container {
  position: relative;
  display: inline-block;
}

.category-dropdown-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  padding: 0.25rem 0.5rem; /* 4px 8px */
  border-radius: 0.5rem; /* 8px */
  transition: background-color 0.2s ease-in-out;
}

.category-dropdown-button:hover {
  background-color: #f3f4f6; /* gray-100 */
}

.category-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  min-width: 240px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  border-radius: 0.5rem; /* 8px */
  padding: 0.5rem; /* 8px */
  z-index: 30;
  border: 1px solid #e5e7eb; /* gray-200 */
}

.category-dropdown-content.show {
  display: block;
}

.category-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem; /* 8px 12px */
  border-radius: 0.375rem; /* 6px */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.category-dropdown-item:hover {
   background-color: #f9fafb; /* gray-50 */
}

.category-dropdown-item label {
  width: 100%;
  cursor: pointer;
  font-weight: normal; /* 讓選項文字不是粗體 */
  color: #374151; /* gray-700 */
}

.category-dropdown-item input[type="checkbox"] {
  margin-right: 0.75rem; /* 12px */
  width: 1.125rem; /* 18px */
  height: 1.125rem; /* 18px */
  accent-color: #3b82f6; /* blue-500 */
  flex-shrink: 0;
}

/* --- 拼音標註樣式 (Ruby Annotation) --- */
.hakka-text ruby {
    display: inline-flex;
    flex-direction: column-reverse; /* 將 rt (拼音) 呈現在 rb (漢字) 上方 */
    line-height: 1.2;
    margin: 0 0.1em;
    text-align: center;
}

.hakka-text rt { /* 拼音文字 */
    font-size: 0.8em; /* 拼音字體縮小 */
    color: #111;
    line-height: 1.1;
    /* user-select: none;  讓拼音不易被選取，減少干擾 */
    /* opacity: 0.9;*/
    font-weight: normal; /* 確保拼音不是粗體 */
    text-align: center;
}

.hakka-text rb { /* 漢字本身 */
    line-height: 1.1;
}

/* 當標音啟用時，隱藏原始的獨立拼音行 */
.pinyin-annotated .pinyin-text {
    display: none !important;
}

/* 標音按鈕啟用時的樣式 */
.control-button.annotation-active {
    background-color: #eef2ff; /* indigo-50 */
    color: #4338ca; /* indigo-700 */
}

.pinyin-annotated .flex.items-baseline {
  align-items: flex-end;
}

/* --- 新增：點擊拼音播放樣式 --- */
.pinyin-word {
    cursor: pointer;
    display: inline-block;
    /* padding: 0 0.1em; */
    border-radius: 0.25rem;
    transition: background-color 0.2s ease-in-out;
}

.pinyin-word:hover {
    background-color: #e0e7ff; /* indigo-100 */
}

/* 讓排序遊戲中的拼音點擊區域更大 */
.sorting-word .pinyin-word {
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem; /* 抵銷內距，維持外觀大小 */
}




/* 重新定義控制按鈕的樣式，使其變為方形且有固定大小 */
#learningModeToolbar .control-button {
    @apply h-9 px-2 flex items-center justify-center gap-1.5 rounded-md text-gray-600 transition-colors duration-150;
}

/* 統一的懸浮效果 */
#learningModeToolbar .control-button:hover {
    @apply bg-gray-200 text-gray-800;
}

/* 按鈕啟用 (Active) 狀態，例如「關閉選取」按鈕 */
#learningModeToolbar .control-button.active {
    @apply bg-blue-100 text-blue-700;
}
#learningModeToolbar .control-button.active:hover {
    @apply bg-blue-200;
}


/* 為每個群組與分隔線之間創造空間 */
#learningModeToolbar .border-r {
    @apply px-2;
}
#learningModeToolbar .pl-1 {
    padding-left: 0.5rem; /* 8px */
}
#learningModeToolbar .pr-2 {
    padding-right: 0.5rem; /* 8px */
}

/* 讓「語言顯示」這類帶有文字的按鈕可以自動調整寬度 */
#learningModeToolbar #displayMenuToggle {
    @apply w-auto px-2;
}

/* --- 下拉選單項目啟用狀態 (Dropdown Item Active State) --- */

/* 通用啟用狀態：淡藍色底 + 深藍色文字 */
.setting-option.active,
.layout-option.active,
.font-size-option.active {
    @apply bg-blue-50 text-blue-800 font-semibold;
}

/* 讓勾選圖示的顏色與文字一致 */
.setting-option.active .check-icon,
.layout-option.active .check-icon,
/* 【新增這裡】為字體選項的勾勾加上顏色 */
.font-size-option.active .check-icon {
    @apply text-blue-600;
}

/* 調整勾選圖示的大小 */
.check-icon.material-icons {
    /* 【修改這裡】將圖示從 20px 縮小為 18px */
    font-size: 1.125rem; /* 18px */
}

/* --- 表格版面樣式 (Table Layout Styles) --- */
.table-responsive-wrapper {
    overflow-x: auto;
    width: 100%;
}

.learning-table {
    width: 100%;
    border-collapse: collapse;
    /* 關鍵：讓表格內容不換行，才能觸發水平捲動 */
    white-space: nowrap;
}

.learning-table th, 
.learning-table td {
    padding: 0.75rem 1rem; /* 12px 16px */
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
    text-align: left;
    vertical-align: middle;
}

.learning-table th {
    background-color: #f9fafb; /* gray-50 */
    font-weight: 600;
    color: #4b5563; /* gray-600 */
    position: sticky;
    top: 0;
    z-index: 1;
}

.learning-table tbody tr:hover {
    background-color: #f3f4f6; /* gray-100 */
}

/* 預設欄位寬度，可根據內容調整 */
.learning-table .col-index { width: 4%; min-width: 50px;}
.learning-table .col-actions { width: 10%; min-width: 120px; }
.learning-table .col-hakka { width: 28%; min-width: 200px; }
.learning-table .col-pinyin { width: 29%; min-width: 250px; }
.learning-table .col-chinese { width: 29%; min-width: 200px; }

/* 標音在字上時，隱藏獨立的拼音欄 */
.pinyin-annotated .learning-table .col-pinyin {
    display: none;
}


/* --- 學習紀錄頁面樣式 (Learning History Page Styles) --- */
.history-list-container {
    background-color: white;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0.75rem; /* 12px */
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.history-list-header, .history-list-row {
    display: grid;
    grid-template-columns: 50px 1.5fr 1.5fr 2fr 110px; /* 調整欄位比例 */
    gap: 1rem; /* 16px */
    align-items: center;
    padding: 0.75rem 1.5rem; /* 12px 24px */
}

.history-list-header {
    background-color: #f9fafb; /* gray-50 */
    font-weight: 600;
    color: #4b5563; /* gray-600 */
    font-size: 0.875rem; /* 14px */
    border-bottom: 2px solid #e5e7eb;
}

.history-list-row {
    border-bottom: 1px solid #f3f4f6; /* gray-100 */
    transition: background-color 0.2s ease-in-out;
}

.history-list-row:last-child {
    border-bottom: none;
}

.history-list-row:hover {
    background-color: #f9fafb; /* gray-50 */
}

.history-list-row .col-icon .material-icons {
    font-size: 1.75rem; /* 28px */
    vertical-align: middle;
}
.history-list-row .col-topic {
    font-weight: 500;
    color: #1f2937; /* gray-800 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.history-list-row .col-settings, .history-list-row .col-date {
    font-size: 0.875rem;
    color: #6b7280; /* gray-500 */
}

.col-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem; /* 垂直間距8px, 水平間距16px */
}

.stat-icon-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    font-size: 0.875rem; /* 14px */
    color: #374151; /* gray-700 */
    white-space: nowrap;
}

.stat-icon-group .material-icons {
    font-size: 1.125rem; /* 18px */
}

/* 遊戲類型顏色 */
.history-list-row.matching .col-icon .material-icons { color: #f97316; /* orange-500 */ }
.history-list-row.quiz .col-icon .material-icons { color: #ef4444; /* red-500 */ }
.history-list-row.sorting .col-icon .material-icons { color: #6366f1; /* indigo-500 */ }


/* 手機版響應式樣式 */
@media (max-width: 767px) {
    .history-list-header {
        display: none; /* 在手機上隱藏標題列 */
    }
    .history-list-row {
        grid-template-columns: 40px 1fr; /* 兩欄佈局：圖示 + 內容 */
        grid-template-rows: auto auto auto; /* 內容自動分行 */
        padding: 1rem;
        gap: 0.25rem 1rem;
    }
    .history-list-row .col-icon {
        grid-row: 1 / span 3; /* 圖示佔據所有行 */
        align-self: flex-start;
    }
    .history-list-row .col-topic { grid-row: 1; grid-column: 2; }
    .history-list-row .col-settings { grid-row: 2; grid-column: 2; }
    .history-list-row .col-stats { grid-row: 3; grid-column: 2; }
    .history-list-row .col-date {
        grid-row: 1; /* 日期移到右上角 */
        grid-column: 2;
        text-align: right;
        font-size: 0.8rem;
    }
}