/* 自訂樣式：篩選列與通用元件（其餘版面沿用 display_unscoped.css） */
body { background: #f3f4f6; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; }
#app { max-width: 1200px; margin: 0 auto; padding: 16px; }

/* 語言切換 */
.language-switcher { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; justify-content: space-between; flex-wrap: wrap; }
.generated-at { font-size: 12px; color: #9ca3af; margin-left: auto; white-space: nowrap; }
.language-switcher-label { font-size: 13px; color: #6b7280; }
.language-switcher-options { display: flex; gap: 6px; flex-wrap: wrap; }
.language-switcher-button { border: 1px solid #d1d5db; background: #fff; border-radius: 4px; padding: 3px 10px; font-size: 13px; cursor: pointer; color: #374151; }
.language-switcher-button.is-active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }

/* 篩選區 */
.filter-section { display: none; background: #fff; border-radius: 8px; border: 1px solid #e5e7eb; padding: 12px 16px; margin-bottom: 12px; }
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.filter-row:last-child { margin-bottom: 0; }
/* 已選擇卡片列：白底裝飾框（與篩選面板同款） */
#selectedCardsBar {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 10px 16px;
  margin-bottom: 12px;
}
#selectedCardsChips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.filter-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; }
.filter-item label { white-space: nowrap; }
.filter-input { border: 1px solid #d1d5db; border-radius: 4px; padding: 6px 10px; font-size: 13px; width: 130px; outline: none; }
.filter-input:focus { border-color: #667eea; box-shadow: 0 0 0 2px rgba(102,126,234,.2); }
.filter-input.narrow { width: 70px; }
.filter-select { border: 1px solid #d1d5db; border-radius: 4px; padding: 6px 8px; font-size: 13px; background: #fff; outline: none; cursor: pointer; }
.filter-select:focus { border-color: #667eea; }

/* 搜尋按鈕 */
.search-button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; border-radius: 6px; padding: 8px 22px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.search-button:hover { opacity: .9; }
.search-icon { font-size: 14px; }

/* 已選卡片 bar */
.button-text { background: none; border: none; color: #667eea; cursor: pointer; font-size: 13px; padding: 2px 6px; }
.button-text:hover { text-decoration: underline; }
.card-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 1px 8px; font-size: 12px; color: #4338ca; margin: 2px 4px 2px 0; cursor: pointer; transition: background .15s, border-color .15s; }
.card-chip:hover { background: #e0e7ff; border-color: #818cf8; }
.card-chip-img { width: 28px; height: 14px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.card-chip .chip-x { font-weight: 700; margin-left: 2px; opacity: .7; }
.chip-count { color: #6b7280; font-weight: 600; margin-left: 2px; }
.chip-remove1 { font-size: 13px; border: none; background: none; color: #dc2626; cursor: pointer; padding: 0 2px 0 1px; line-height: 1.4; }
.chip-remove1:hover { opacity: .7; }
.card-chip .card-attr-dot { font-size: 14px; }
#selectedCardsChips { display: inline-flex; flex-wrap: wrap; gap: 2px; }

/* 帳號結果 */
.account-section { margin-top: 12px; }
.account-list { position: relative; }
.account-list-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; box-sizing: border-box; }
.account-list-item-favorited { border-color: #764ba2; box-shadow: 0 0 0 1px #764ba2; }
.account-basic-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.record-number-section { display: flex; align-items: center; gap: 8px; }
.record-number { font-size: 15px; font-weight: 600; color: #111827; }
.copy-button { border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; border-radius: 4px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.copy-button:hover { background: #e0e7ff; }
.upload-id-item { font-size: 12px; color: #9ca3af; }
.upload-id-value { font-family: monospace; color: #9ca3af; }
.account-favorite-button { display: none; border: 1px solid #e5e7eb; background: #fff; border-radius: 4px; font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 8px; }
.account-favorite-button.is-fav { color: #f59e0b; border-color: #f59e0b; }
.role-card-info { display: flex; gap: 14px; font-size: 13px; color: #374151; flex-wrap: wrap; }
.role-card-info .info-item .info-value { font-weight: 600; color: #111827; }
.info-item .info-label { color: #9ca3af; margin-right: 4px; }

/* 卡片小圖（帳號內的角色卡） */
.role-info-section { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; max-height: 300px; overflow-y: auto; }
.account-card-list-row { display: flex; align-items: center; padding: 3px 10px; font-size: 12px; color: #374151; border-radius: 4px; }
.account-card-list-row:hover { background: #f9fafb; }
.account-card-list-row.is-selected { background: #eef2ff; color: #4338ca; font-weight: 600; }
.account-card-list-row.lowstar { display: none; }
.account-list-item.expanded .account-card-list-row.lowstar { display: flex; }
.role-card-item { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.role-card-image-container { width: 56px; height: 56px; overflow: hidden; border-radius: 6px; border: 1px solid #e5e7eb; }
.role-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.role-card-name { font-size: 10px; color: #6b7280; max-width: 112px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.role-card-item-highlighted .role-card-image-container { border-color: #764ba2; box-shadow: 0 0 0 1px #764ba2; }
.role-card-placeholder { width: 56px; height: 56px; border-radius: 6px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #9ca3af; }

/* 空狀態 */
.compare-empty { font-size: 13px; color: #9ca3af; }
.more-indicator { text-align: center; padding: 12px; }
.searching { text-align: center; color: #9ca3af; padding: 24px; font-size: 13px; }

/* 收藏面板 */
.favorite-panel-mask { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; }
.favorite-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 92vw); background: #fff; z-index: 100; box-shadow: -4px 0 16px rgba(0,0,0,.15); display: flex; flex-direction: column; }
.favorite-panel-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.favorite-panel-header .favorite-close-button, .favorite-panel-header .favorite-clear-button { margin-left: auto; background: none; border: 1px solid #d1d5db; border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.favorite-panel-header .favorite-clear-button { margin-left: 8px; color: #dc2626; border-color: #fecaca; }
.favorite-panel-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.favorite-summary { font-size: 12px; color: #9ca3af; font-weight: 400; }
.favorite-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.favorite-row { display: flex; align-items: center; gap: 10px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.favorite-row-id { font-weight: 600; font-size: 14px; }
.favorite-row-main { flex: 1; font-size: 12px; color: #6b7280; }
.favorite-select-indicator { width: 16px; height: 16px; border: 1px solid #d1d5db; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.favorite-select-indicator.is-selected { background: #667eea; color: #fff; border-color: #667eea; }
.favorite-row-remove { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 16px; }

/* 對比表 */
.compare-table-wrap { overflow-x: auto; margin-top: 8px; }
.compare-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.compare-table th, .compare-table td { border: 1px solid #e5e7eb; padding: 6px 8px; text-align: left; }
.compare-table th { background: #f9fafb; white-space: nowrap; }
.compare-card-chip { display: inline-block; width: 26px; height: 26px; border-radius: 4px; overflow: hidden; margin: 1px; border: 1px solid #e5e7eb; vertical-align: middle; }
.compare-copy-button { border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca; border-radius: 4px; padding: 1px 6px; font-size: 11px; cursor: pointer; }

/* 浮動按鈕 */
.favorite-float-button { display: none; position: fixed; right: 20px; bottom: 80px; z-index: 80; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; border-radius: 50%; width: 46px; height: 46px; font-size: 18px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.back-to-top-button { position: fixed; right: 20px; bottom: 20px; z-index: 80; background: #fff; border: 1px solid #d1d5db; border-radius: 50%; width: 40px; height: 40px; font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Toast */
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(17,24,39,.9); color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 13px; z-index: 200; opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* 展開詳情 */
.expanded-content { border-top: 1px dashed #e5e7eb; margin-top: 10px; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #6b7280; }
.expanded-content .expanded-item { display: inline-flex; gap: 4px; }
.expanded-content .expanded-label { color: #9ca3af; }
.expand-btn { margin-left: auto; background: none; border: none; color: #667eea; font-size: 12px; cursor: pointer; }

/* 卡片選擇網格 */
.cards-section { background: #fff; border-radius: 8px; border: 1px solid #e5e7eb; padding: 12px 16px; margin-bottom: 12px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 380px; overflow-y: auto; }
.card-horizontal-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all .15s; }
.card-horizontal-item:hover { border-color: #c7d2fe; }
.card-horizontal-item.is-selected { border-color: #764ba2; background: #f5f3ff; box-shadow: 0 0 0 1px #764ba2; }
.card-horizontal-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.card-horizontal-name { font-size: 11px; color: #374151; text-align: center; line-height: 1.2; max-height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cards-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cards-title { font-size: 15px; font-weight: 600; color: #111827; }
.card-type-tabs { display: inline-flex; align-items: center; gap: 4px; }
.gen-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
#cardFlavorTabs { margin: 0 0 10px; }
#genTabs { margin: 0 0 10px; }
.gen-tab-button, .card-type-tab-button { border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 12px; color: #6b7280; transition: all .15s; }
.gen-tab-button:hover, .card-type-tab-button:hover { border-color: #c7d2fe; color: #4f46e5; }
.gen-tab-button.is-active, .card-type-tab-button.is-active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
.card-type-tab-label { font-size: 12px; color: #667eea; background: #eef2ff; border-radius: 10px; padding: 2px 10px; }
.card-type-tab-count { font-size: 12px; color: #9ca3af; }

/* ---------- 卡片選擇：星級分頁 / 顯示模式切換 / 條列模式 ---------- */
.card-horizontal-item { position: relative; }
.card-type-tab-button { border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 2px 10px; cursor: pointer; font-size: 12px; color: #6b7280; }
.card-type-tab-button:hover { border-color: #c7d2fe; color: #4f46e5; }
.card-type-tab-button.is-active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
.star-tab-count { opacity: .85; display: none; }
.view-toggle { display: none !important; margin-left: auto; border: 1px solid #e5e7eb; background: #fff; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px; color: #4b5563; white-space: nowrap; }
.view-toggle:hover { border-color: #c7d2fe; color: #4f46e5; }
.cards-list { max-height: 380px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; margin-top: 8px; }
.card-list-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid #f3f4f6; cursor: pointer; font-size: 13px; }
.card-list-row:last-child { border-bottom: none; }
.card-list-row:hover { background: #f9fafb; }
.card-list-row.is-selected { background: #eef2ff; }
.card-list-star { color: #b45309; font-size: 11px; min-width: 24px; font-weight: bold; }
.card-dup-count { color: #6b7280; font-weight: 600; margin-left: 4px; }
.md5-query-note { font-size: 13px; color: #6b7280; background: #f9fafb; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.card-list-name { color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-row-count { font-size: 11px; color: #6b7280; font-weight: 600; margin-left: auto; flex-shrink: 0; }

/* 卡片類型標籤：◉ 彩色圓點（顏色依遊戲截圖：可愛=粉 #E83D67、清純=綠 #10B958、快樂=橙黃 #F29C11，2026-08-07） */
.card-attr-tag { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; white-space: nowrap; font-size: 12px; color: #6b7280; flex-shrink: 0; }
.card-attr-dot { font-size: 9px; line-height: 1; }
.attr-1 .card-attr-dot, .card-attr-dot.attr-1 { color: #E83D67; }
.attr-2 .card-attr-dot, .card-attr-dot.attr-2 { color: #10B958; }
.attr-3 .card-attr-dot, .card-attr-dot.attr-3 { color: #F29C11; }
.gen-tab-button .card-attr-dot { font-size: 10px; margin-right: 2px; }
.card-horizontal-item .card-attr-tag, .card-chip .card-attr-tag { font-size: 10px; }
.card-chip .card-attr-tag { margin-right: 4px; }
.card-placeholder { width: 56px; height: 56px; border-radius: 8px; background: linear-gradient(135deg, #eef2ff, #f9fafb); border: 1px dashed #c7d2fe; display: flex; align-items: center; justify-content: center; color: #6366f1; font-size: 12px; font-weight: bold; }
.star-badge { position: absolute; top: 2px; right: 2px; background: rgba(180, 83, 9, .92); color: #fff; font-size: 9px; border-radius: 4px; padding: 0 3px; line-height: 1.4; }

/* 卡片名稱搜尋輸入框（卡片選擇區第一行，2026-08-07） */
.card-search-row { margin-bottom: 10px; }
.card-search-input { border: 1px solid #d1d5db; border-radius: 4px; padding: 6px 10px; font-size: 13px; width: 100%; box-sizing: border-box; outline: none; }
.card-search-input:focus { border-color: #667eea; box-shadow: 0 0 0 2px rgba(102,126,234,.2); }