/* style.css (Cleaned and Merged Final Version) */

/* === 1. 全站通用樣式 (Global Styles) === */
body {
    font-family: "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

header {
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

header h1 {
    font-size: 2.5em;
    font-weight: 700;
    background: linear-gradient(45deg, #007bff, #1a73e8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5em;
}

header p {
    font-size: 1.1em;
    max-width: 600px;
    margin: 0 auto;
    color: #6c757d;
}

/* === 2. index.php - 篩選器區域樣式 === */
.filters-container {
    padding: 25px;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 30px;
}

/* style.css (請用這段程式碼替換舊的篩選器樣式) */

/* === 2. index.php - 新版篩選器區域樣式 === */
.filters-container {
    padding: 25px;
    background-color: #f8f9fa; /* 給篩選器一個淺色背景 */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.filter-step {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px dashed #ced4da;
}
.filter-step:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.filter-step-title {
    font-size: 1.2em;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #1a73e8;
}

/* 步驟一：模式切換器樣式 */
.mode-switcher {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
}
.mode-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1em;
    cursor: pointer;
}
#item-search-box {
    transition: all 0.3s ease;
}
#item-search-box:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 步驟二：篩選範圍格線佈局 */
.filter-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
}
.filter-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #495057;
}

/* 其他共用表單元件樣式 (可與原有樣式合併) */
select, input[type="text"] {
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
}
.input-with-icon { position: relative; flex-grow: 1; }
.input-with-icon .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #888; font-size: 1.1em; }
.input-with-icon input { padding-left: 40px !important; }
.filter-group { margin-bottom: 20px; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group label { display: block; font-weight: 600; margin-bottom: 10px; color: #495057; font-size: 1.1em; }
.inline-filters { display: flex; gap: 10px; }
.inline-filters select { flex: 1; }
select {
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .icon { position: absolute; left: 12px; color: #888; font-size: 1.1em; }
.input-with-icon input { padding-left: 40px !important; width: 100%; }
.tooltip-trigger { display: inline-block; margin-left: 8px; font-weight: bold; color: #1a73e8; border: 1px solid #1a73e8; border-radius: 50%; width: 20px; height: 20px; line-height: 20px; text-align: center; cursor: help; font-size: 14px; }
.rank-type-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
.rank-type-card { border: 2px solid #e9ecef; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; }
.rank-type-card:hover { transform: translateY(-4px); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.rank-type-card.active { border-color: #1a73e8; background-color: #e9f5ff; box-shadow: 0 4px 20px rgba(26, 115, 232, 0.2); transform: translateY(-4px); }
.card-icon { font-size: 2.2em; margin-bottom: 12px; color: #1a73e8; }
.card-title { font-weight: 600; font-size: 1.1em; color: #212529;}
.card-desc { font-size: 0.9em; color: #6c757d; margin-top: 5px;}
.submit-button-container { text-align: center; padding-top: 15px; border-top: 1px solid #e9ecef; margin-top: 20px; }
.submit-button { background: linear-gradient(45deg, #1a73e8, #007bff); color: white; border: none; padding: 14px 45px; font-size: 18px; font-weight: bold; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2); }
.submit-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3); }

/* === 3. index.php - 結果區 & 表格樣式 === */
.results { position: relative; margin-top: 30px;}
.results h2 { color: #212529; border-bottom: 3px solid #1a73e8; padding-bottom: 10px; font-size: 1.8em; margin-bottom: 25px; }
#item-filter-container { margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; display: flex; align-items: center; gap: 15px; border: 1px solid #e9ecef;}
#item-filter-container label { margin-bottom: 0; font-weight: 500; }
#product-search-box, #item-filter { padding: 10px 15px; border: 1px solid #ced4da; border-radius: 8px; font-size: 16px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 20px; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #dee2e6; }
th { background-color: #f8f9fa; font-weight: 600; color: #495057; }
tbody tr { transition: background-color 0.2s; }
tbody tr:hover { background-color: #e9f5ff; }
td:first-child { font-weight: bold; color: #6c757d; }
.rank-up { color: #dc3545; font-weight: bold; }
.rank-down { color: #28a745; font-weight: bold; }
.rank-neutral { color: #6c757d; }
.rank-new { color: #007bff; font-weight: bold; font-style: italic; }
.placeholder-row td { color: #bbb; background-color: #fcfcfc; font-style: italic; }
.placeholder-row .blurry-text { filter: blur(2px); user-select: none; }
.placeholder-row .cta-button-small { background-color: #ff9800; color: white; padding: 5px 10px; border-radius: 4px; text-decoration: none; font-size: 0.9em; font-style: normal; transition: background-color 0.2s;}
.placeholder-row .cta-button-small:hover { background-color: #e68a00; }
.pagination { margin-top: 30px; text-align: center; }
.pagination a, .pagination span { display: inline-block; padding: 8px 16px; margin: 0 4px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #1a73e8; background-color: #fff; transition: background-color 0.2s; }
.pagination a:hover { background-color: #f1f1f1; }
.pagination span.active { background-color: #1a73e8; color: white; border-color: #1a73e8; cursor: default; }
.pagination span.disabled, .pagination span.ellipsis { color: #ccc; cursor: default; padding: 8px 16px; margin: 0 4px; }

/* === 4. category_rankings.php - 品類戰情室樣式 === */
.sub-tab-nav { display: flex; flex-wrap: wrap; border-bottom: 2px solid #dee2e6; margin-bottom: 25px; }
.sub-tab-link { padding: 10px 20px; cursor: pointer; border: none; background: none; font-size: 1.1em; color: #6c757d; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; }
.sub-tab-link:hover { color: #007bff; }
.sub-tab-link.active { color: #1a73e8; border-bottom-color: #1a73e8; font-weight: 600; }
/* style.css (修改後的樣式) */

.category-grid {
    display: grid;
    /* 修改：讓網格每行最多容納兩個元素，並能自動適應螢幕寬度 */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}
.channel-card { border: 1px solid #e9ecef; border-radius: 12px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; transition: all 0.3s ease-in-out; }
.channel-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }
.channel-card h3 { margin: 0; padding: 20px 25px; font-size: 1.4em; font-weight: 600; color: #343a40; border-bottom: 1px solid #e9ecef; display: flex; align-items: center; }
/* style.css (修改後的樣式) */

/* 專業版 SVG 圖示樣式 */
.channel-icon {
    width: 28px; /* 設定圖示大小 */
    height: 28px;
    margin-right: 12px; /* 圖示與文字的間距 */
    vertical-align: middle; /* 確保圖示與文字垂直對齊 */
    fill: currentColor; /* 讓 SVG 圖示繼承文字的顏色 */
    position: relative;
    top: -2px;
}

/* 確保舊的 ::before 樣式被清空，避免衝突 */
.channel-card h3::before {
    content: '';
    margin-right: 0;
    font-size: initial; /* 恢復預設字體大小 */
}
.ranking-list {
    list-style-type: none;
    padding: 15px 25px 25px 25px;
    margin: 0;
    counter-reset: rank-counter;
    flex-grow: 1;
    /* --- 以下為新增的兩行 --- */
    max-height: 450px; /* 設定列表的最大高度，可依據您的偏好調整 */
    overflow-y: auto;  /* 當內容超出最大高度時，自動顯示垂直滾動條 */
}
.ranking-list li { padding: 16px 0; border-bottom: 1px solid #f1f3f5; display: flex; align-items: center; gap: 18px; }
.ranking-list li:last-child { border-bottom: none; padding-bottom: 5px; }
.ranking-list li::before { counter-increment: rank-counter; content: counter(rank-counter); font-size: 1.2em; font-weight: 700; color: #868e96; min-width: 2em; text-align: center; flex-shrink: 0; background-color: transparent; }
.ranking-list li:nth-child(1)::before, .ranking-list li:nth-child(2)::before, .ranking-list li:nth-child(3)::before { color: #fff; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ranking-list li:nth-child(1)::before { background-color: #ffb300; }
.ranking-list li:nth-child(2)::before { background-color: #5f6368; }
.ranking-list li:nth-child(3)::before { background-color: #1a73e8; }
.ranking-list .product-details { display: flex; flex-direction: column; flex-grow: 1; }
.ranking-list .product-name { font-weight: 600; font-size: 1.05em; color: #212529; line-height: 1.4; }
.ranking-list .product-rank { font-size: 0.8em; color: #adb5bd; margin-top: 4px; }
.ranking-list .rank-change-indicator { margin-left: 10px; font-size: 1.1em; }

/* === 5. 通用頁尾 & 懸浮按鈕 === */
.next-steps { margin-top: 50px; padding-top: 30px; border-top: 1px solid #e9ecef; background-color: #f8f9fa; padding: 30px; margin: 50px -40px -30px -40px; border-radius: 0 0 12px 12px; }
.next-steps h3 { font-size: 1.5em; color: #333; }
.features-preview { display: flex; justify-content: center; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.feature-card { flex: 1; min-width: 300px; max-width: 400px; border: 1px solid #ddd; border-radius: 12px; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: all 0.3s ease; display: flex; flex-direction: column; overflow: hidden; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.card-image-container { width: 100%; height: 180px; overflow: hidden; background-color: #e9ecef; }
.card-image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.feature-card:hover .card-image-container img { transform: scale(1.05); }
.card-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.card-content h4 { margin-top: 0; color: #1a73e8; }
.card-content p { flex-grow: 1; }
.card-content .cta-button-live, .card-content button { margin-top: auto; }
/* * === 主要修改處：修正行動呼籲(CTA)按鈕的文字置中 ===
 */
.cta-button-live {
    /* 1. 關鍵：將 display 改為 inline-flex 來啟用 Flexbox 佈局 */
    display: inline-flex;
    align-items: center;      /* 2. 垂直置中 */
    justify-content: center;  /* 3. 水平置中 */
    text-align: center;       /* 4. 針對不支持 Flexbox 的舊瀏覽器做兜底 */
    
    /* 以下是您原有的按鈕外觀樣式 */
    color: white !important; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 25px; 
    text-decoration: none; 
    font-weight: bold; 
    transition: all 0.2s ease-in-out; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.15); 
}

/* 您在 HTML 中指定的橘色按鈕樣式 */
.cta-button-live[style*="background-color: #ff9800"] {
    background-color: #ff9800 !important;
}
.cta-button-live[style*="background-color: #ff9800"]:hover {
    background-color: #e68a00 !important;
}

/* 預設的綠色按鈕樣式 */
.cta-button-live {
    background-color: #00c300;
}
.cta-button-live:hover {
    background-color: #009f28;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
.cta-button-live:hover { background-color: #009f28; transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
.site-footer { margin-top: 50px; padding-top: 25px; border-top: 1px solid #e0e0e0; text-align: center; font-size: 0.85em; color: #6c757d; line-height: 1.8; }
.site-footer p { margin: 5px 0; }
#line-customer { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background-color: #00c300; color: white; padding: 12px 18px; border-radius: 50px; font-size: 16px; font-weight: bold; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); text-decoration: none; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; }
#line-customer:hover { background-color: #009f28; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
.loading-overlay {
    position: fixed; /* 改為 fixed，讓它相對於整個瀏覽器視窗定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 使用一個非常高的 z-index 確保它在最上層 */
    display: none;
    border-radius: 0; /* 全螢幕遮罩不需要圓角 */
}
.spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #1a73e8; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* style.css (新增的樣式) */

/* --- 品類戰情室主頁籤樣式 --- */
.tab-nav {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 25px;
}
.tab-link {
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}
.tab-link:hover {
    color: #1a73e8;
}
.tab-link.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}
.tab-pane {
    display: none; /* 預設隱藏所有內容面板 */
}
.tab-pane.active {
    display: block; /* 只顯示 active 的那個 */
}

/* style.css (新增的樣式) */

/* --- 主頁籤導覽列樣式 --- */
.main-tab-nav {
    display: flex;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 25px;
}
.main-tab-link {
    padding: 12px 25px;
    font-size: 1.2em; /* 讓主頁籤更大更醒目 */
    font-weight: 600;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}
.main-tab-link:hover {
    background-color: #f8f9fa;
    color: #1a73e8;
}
.main-tab-link.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}
.main-tab-pane {
    display: none; /* 預設隱藏所有內容面板 */
}
.main-tab-pane.active {
    display: block; /* 只顯示 active 的那個 */
}

/* --- AI 洞察報告文章樣式 --- */
.ai-report {
    line-height: 1.9; /* 加大行高，提升長文閱讀體驗 */
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 20px;
    color: #343a40;
}
.ai-report h1, .ai-report h2, .ai-report h3 {
    font-weight: 600;
    color: #212529;
}
.ai-report h2 {
    font-size: 1.8em;
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
}
.ai-report h3 {
    font-size: 1.5em;
    margin-top: 30px;
    margin-bottom: 15px;
}
.ai-report table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}
.ai-report th, .ai-report td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}
.ai-report th {
    background-color: #f8f9fa;
}
.ai-report tr:last-child td {
    border-bottom: none;
}
.ai-report ul, .ai-report ol {
    padding-left: 25px;
}
.ai-report li {
    margin-bottom: 10px;
}
.ai-report hr {
    border: 0;
    border-top: 1px solid #e9ecef;
    margin: 40px 0;
}
/* style.css (新增的樣式) */

/* 讓主頁籤按鈕能容納圖示和文字並對齊 */
.main-tab-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 圖示和文字的間距 */
}

/* 主頁籤中的 SVG 圖示樣式 */
.main-tab-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor; /* 讓圖示顏色隨文字顏色變化 (active時變藍) */
}
/* style.css (新增的樣式) */

/* 品類戰情室頁面的搜尋表單樣式 */
.category-search-container {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
    border: 1px solid #e9ecef;
}

/* --- 品類洞察室 - 篩選器寬度與佈局最終優化 --- */

.category-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
}
.category-search-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.category-search-form label {
    font-weight: 500;
    font-size: 1.1em;
    white-space: nowrap;
}

/* 讓搜尋框容器能容納建議列表 */
.search-input-wrapper {
    position: relative;
    flex-grow: 1;
}

/* 搜尋框本身的樣式 */
#category-search-box {
    width: 80%;
    padding: 12px 15px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ced4da;
}

/* 搜尋按鈕樣式 */
.category-search-form .submit-button {
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 6px;
}

/* style.css (新增的樣式) */

//* --- 動能篩選列的響應式樣式 --- */
.view-options-bar {
    display: flex;
    justify-content: space-between; /* 在寬螢幕上，將內容推向左右兩側 */
    align-items: center;           /* 垂直置中對齊 */
    flex-wrap: wrap;               /* 允許換行以應對極端情況 */
    gap: 15px;                     /* 項目之間的間距 */
    margin-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 20px;
}

/* 當螢幕寬度小於或等於 768px 時 (例如平板或手機) */
@media (max-width: 768px) {
    .view-options-bar {
        flex-direction: column; /* 將排版方向改為垂直堆疊 */
        align-items: stretch;   /* 讓子項目寬度延展至與容器同寬 */
    }

    #in-list-search-box {
        width: 100%; /* 讓搜尋框在小螢幕上佔滿整行 */
        box-sizing: border-box; /* 確保 padding 不會讓寬度溢出 */
    }
}

/* 按鈕的通用基礎樣式 */
.view-option-btn {
    padding: 8px 18px;
    border: 2px solid #ced4da; /* 預設邊框顏色 */
    background-color: #fff;
    color: #495057; /* 預設文字顏色 */
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600; /* 加粗文字 */
    transition: all 0.2s ease;
}

/* --- 全部顯示按鈕 (預設藍色主題) --- */
.view-option-btn[data-filter="all"]:hover {
    background-color: #e9f5ff;
}
.view-option-btn[data-filter="all"].active {
    background-color: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

/* --- 只看上漲按鈕 (紅色主題) --- */
.view-option-btn[data-filter="rising"] {
    color: #dc3545; /* 紅色文字 */
    border-color: #f5c6cb; /* 淡紅色邊框 */
}
.view-option-btn[data-filter="rising"]:hover {
    background-color: #f8d7da;
}
.view-option-btn[data-filter="rising"].active {
    background-color: #dc3545; /* 紅色背景 */
    color: #fff;
    border-color: #dc3545;
}

/* --- 只看下跌按鈕 (綠色主題) --- */
.view-option-btn[data-filter="falling"] {
    color: #28a745; /* 綠色文字 */
    border-color: #c3e6cb; /* 淡綠色邊框 */
}
.view-option-btn[data-filter="falling"]:hover {
    background-color: #d4edda;
}
.view-option-btn[data-filter="falling"].active {
    background-color: #28a745; /* 綠色背景 */
    color: #fff;
    border-color: #28a745;
}
/* style.css (新增的樣式) */

/* 可展開/收合區塊的樣式 */
.collapsible-section {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 30px;
    background-color: #fff;
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    cursor: pointer;
}

.collapsible-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: #495057;
}

.toggle-btn {
    background: none;
    border: 1px solid #ced4da;
    color: #495057;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}
.toggle-btn:hover {
    background-color: #e9ecef;
}

/* 文字雲容器 */
.collapsible-content {
    padding: 20px;
    border-top: 1px solid #e9ecef;
    max-height: 500px; /* 動畫所需 */
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}

/* 收合時的狀態 */
.collapsible-section:not(.open) .collapsible-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 文字雲 Hover 泡泡特效樣式 --- */
#word-hover-bubble {
    position: absolute; /* 絕對定位，才能蓋在 Canvas 上 */
    transform: translate(-50%, -50%); /* 讓元素的中心點對準滑鼠游標 */
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 600; /* 通常文字雲的字是粗體 */
    color: #007bff; /* 給一個醒目的顏色 */
    background-color: rgba(233, 245, 255, 0.85); /* 給一點背景色，增加質感 */
    padding: 5px 10px;
    border-radius: 8px;
    z-index: 10; /* 確保在最上層 */
    
    /* 這是關鍵！讓滑鼠事件可以穿透這個泡泡，直接觸發下方的 Canvas，避免閃爍 */
    pointer-events: none; 
}

.word-bubble-anim {
    /* 應用下面定義的動畫 */
    animation: bubble-pop 0.6s ease-out forwards;
}

/* 定義一個名為 "bubble-pop" 的關鍵影格動畫 */
@keyframes bubble-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 讓提交按鈕容器支援並排與間距 --- */
.submit-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* 按鈕之間的間距 */
    flex-wrap: wrap; /* 在小螢幕時自動換行 */
}

/* --- 為新增的「次要」按鈕設定不同顏色，以區分主次操作 --- */
.submit-button.secondary-button {
    background: #6c757d; /* 設定為中性灰色 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.submit-button.secondary-button:hover {
    background: #5a6268;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 品項動能分析卡片樣式 --- */
.ranking-dynamics-summary {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: none; /* 預設隱藏，由 JS 控制顯示 */
    flex-wrap: wrap; /* 允許內容換行 */
    gap: 10px 20px; /* 設定行與列的間距 */
    align-items: center;
}

.ranking-dynamics-summary .summary-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #495057;
    margin-right: 10px;
}

.ranking-dynamics-summary .stat-item {
    font-size: 1em;
    color: #6c757d;
}

.ranking-dynamics-summary .stat-item strong {
    font-weight: 600;
    color: #343a40;
    margin: 0 4px;
}

/* 針對不同動態的數字顏色 */
.stat-item.rising strong { color: #dc3545; }
.stat-item.falling strong { color: #28a745; }
.stat-item.new-entry strong { color: #007bff; }
/* style.css (可選，新增此段樣式) */

/* --- 為所有在新分頁開啟的主頁籤，加上一個「外部連結」小圖示 --- */
.main-tab-link[target="_blank"]::after {
    content: '↗';
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    font-weight: bold;
    color: #888;
    transition: color 0.2s ease;
}

.main-tab-link[target="_blank"]:hover::after {
    color: #1a73e8;
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 通路卡片標題中的總筆數樣式 --- */
.channel-item-count {
    font-size: 0.6em; /* 字體縮小 */
    font-weight: 400; /* 字重變細 */
    color: #6c757d; /* 使用輔助文字的灰色 */
    margin-left: 10px; /* 與主標題拉開間距 */
    vertical-align: middle; /* 垂直對齊 */
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 品類戰情室 - 搜尋表單樣式調整 --- */
.category-search-form {
    display: flex;
    flex-wrap: wrap; /* 允許在小螢幕換行 */
    align-items: flex-end; /* 讓 label 和 input 底部對齊 */
    gap: 20px; /* 項目之間的間距 */
}

.category-search-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.category-search-form label {
    font-size: 0.9em;
    color: #6c757d;
    font-weight: 600;
}

.category-search-form .search-input-wrapper {
    flex-grow: 1; /* 讓搜尋框佔據多餘空間 */
}

/* 統一所有控制項的視覺高度，這是對齊的基礎 */
.category-search-form input[type="text"],
.category-search-form select,
.category-search-form .toggle-wrapper,
.category-search-form .submit-button {
    height: 44px; /* 設定一個明確、統一的高度 */
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    padding: 0 12px; /* 統一左右內距 */
}

/* 確保下拉選單文字垂直置中 */
.category-search-form select {
    padding-top: 1px;
}

/* 強制 wrapper 內的內容垂直置中 */
.category-search-form .toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 強制重設開關本身的樣式，移除可能的干擾 */
.category-search-form .toggle-wrapper .toggle-switch {
    position: relative;
    top: auto; /* 移除任何可能的 top 定位偏移 */
    flex-shrink: 0; /* 防止開關被壓縮 */
}

/* 關鍵修正：強制文字標籤的行高與容器高度一致 */
.category-search-form .toggle-wrapper .toggle-label {
    line-height: 42px; /* 讓行高等於容器高度(44px)減去上下邊框(2px) */
    font-size: 14px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

/* 確保按鈕文字也能完美置中 */
.category-search-form .submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* style.css (請在檔案最後新增以下樣式) */

/* --- 美化 .ranking-list 內部滾動條的樣式 (適用於 Webkit 核心的瀏覽器如 Chrome, Safari, Edge) --- */
.ranking-list::-webkit-scrollbar {
    width: 8px; /* 滾動條寬度 */
}

.ranking-list::-webkit-scrollbar-track {
    background: #f1f1f1; /* 滾動條軌道顏色 */
    border-radius: 10px;
}

.ranking-list::-webkit-scrollbar-thumb {
    background: #ccc; /* 滾動條本身的顏色 */
    border-radius: 10px;
}

.ranking-list::-webkit-scrollbar-thumb:hover {
    background: #aaa; /* 滑鼠移上去時的顏色 */
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 表格中的趨勢圖按鈕樣式 --- */
.trend-chart-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5em; /* 放大圖示 */
    color: #6c757d;
    transition: color 0.2s;
}
.trend-chart-btn:hover {
    color: #007bff;
}

/* --- 圖表彈出視窗 (Modal) 樣式 --- */
.chart-modal {
    display: none; /* 預設隱藏 */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6); /* 半透明黑色背景 */
    animation: fadeIn 0.3s;
}

.chart-modal-content {
    background-color: #fefefe;
    margin: 8% auto;
    padding: 20px 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.chart-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    border: none;
    background: none;
}
.chart-modal-close:hover,
.chart-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#chart-modal-title {
    margin-top: 0;
    color: #343a40;
}

@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 品類觀測站 - 調整商品列表 li 為 flex 佈局以對齊按鈕 --- */
.ranking-list li {
    /* ... 保留 li 原有的樣式 ... */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 關鍵：讓左右兩邊的元素分開對齊 */
}

/* --- 品類觀測站 - 商品列表中的趨勢按鈕樣式 --- */
.ranking-list .trend-chart-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.3em; /* 調整圖示大小 */
    color: #adb5bd;  /* 預設顏色調淡 */
    padding: 0 0 0 15px; /* 左側留出一些空間 */
    flex-shrink: 0; /* 防止按鈕被壓縮 */
    transition: color 0.2s;
}

.ranking-list .trend-chart-btn:hover {
    color: #007bff; /* 滑鼠移上去時變色 */
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- 通路排行榜觀測站 - 放大搜尋框樣式 --- */
#item-search-box {
    font-size: 18px; /* 加大輸入框內的字體大小 */
    height: 50px;    /* 增加輸入框的高度 */
    padding-top: 12px;
    padding-bottom: 12px;
}

/* 讓搜尋框在被點選 (focus) 時，有更明顯的視覺提示 */
#item-search-box:focus {
    border-color: #1a73e8; /* 邊框變色 */
    box-shadow: 0 0 8px rgba(26, 115, 232, 0.3); /* 加上柔和的光暈效果 */
}
/* style.css (請在檔案最後新增以下樣式) */

/* --- Tooltip 提示文字樣式 --- */

/* style.css (請用這段完整的程式碼覆蓋舊的 Tooltip 樣式) */

/* --- Tooltip 提示文字樣式 (HTML 元素修正版) --- */

/* 1. Tooltip 的容器，設定相對定位和滑鼠樣式 */
.tooltip-container {
    position: relative;
     cursor: pointer; /* 將 help 修改為 pointer */
}

/* 2. Tooltip 的內容框，預設隱藏 */
.tooltip-container .tooltip-content {
    display: none; /* 使用 display 來控制顯示/隱藏 */
    position: absolute;
    bottom: 110%; /* 定位在元素的正上方 */
    left: 50%;
    transform: translateX(-50%);
    
    /* 外觀樣式 */
    background-color: #343a40;
    color: #ffffff; /* 設定文字顏色為白色 */
    padding: 15px;
    border-radius: 8px;
    min-width: 320px; /* 設定最小寬度 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 100;
    text-align: left;
}

/* 3. 當滑鼠移到容器上時，顯示 Tooltip 內容框 */
.tooltip-container:hover .tooltip-content {
    display: block;
}

/* 4. 為 Tooltip 內容中的 ul 和 li 設定樣式，確保它們在深色背景下可見 */
.tooltip-container .tooltip-content ul {
    padding-left: 20px;
    margin: 10px 0 0 0;
    color: #f1f1f1; /* 列表文字顏色 */
}

.tooltip-container .tooltip-content li {
    margin-bottom: 5px;
    line-height: 1.5;
}

/* 5. Tooltip 的小三角形箭頭 */
.tooltip-container .tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%; /* 定位在提示框下方 */
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #343a40; /* 三角形顏色與提示框背景色一致 */
}
/* style.css (在檔案末尾加入) */

/* --- 品類洞察室 - 收藏通路星號按鈕樣式 --- */
.favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5em; /* 讓星號大一點、清楚一點 */
    color: #ced4da; /* 未收藏時的預設灰色 */
    margin-left: auto; /* 將按鈕推到標題的最右邊 */
    padding: 0 5px;
    transition: color 0.2s, transform 0.2s;
    line-height: 1; /* 避免繼承奇怪的行高 */
}

.favorite-btn:hover {
    transform: scale(1.2); /* 滑鼠移上去時放大，增加互動感 */
}

/* 已收藏時的樣式 */
.favorite-btn.favorited {
    color: #ffc107; /* 金色 */
}
/* style.css (在檔案末尾加入) */

/* --- 讓收藏星號按鈕游標變為可點擊的手指 --- */
.favorite-btn {
    cursor: pointer;
}

/* --- 為頁籤上的 Tooltip 微調樣式 --- */
.sub-tab-nav .tooltip-container {
    cursor: default; /* 讓這個頁籤本身不是 help 圖示 */
}
.sub-tab-nav .tooltip-container .tooltip-content {
    min-width: 250px; /* Tooltip 可以窄一點 */
    text-align: center; /* 文字置中 */
    bottom: 105%; /* 微調位置 */
}
.sub-tab-nav .tooltip-container .tooltip-content::after {
    bottom: -15px; /* 微調箭頭位置 */
}
/* style.css (在檔案末尾加入) */

/* --- 品類洞察室 - 收藏商品星號按鈕樣式 --- */
.product-favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em; /* 讓星號比商品名稱稍大一點 */
    color: #ced4da; /* 未收藏時的預設灰色 */
    padding: 0 8px 0 0; /* 與商品名稱的間距 */
    vertical-align: middle; /* 垂直置中對齊 */
    transition: color 0.2s, transform 0.2s;
}

.product-favorite-btn:hover {
    transform: scale(1.2);
}

.product-favorite-btn.favorited {
    color: #ffc107; /* 已收藏時的金色 */
}

/* 讓商品名稱本身也垂直對齊 */
.product-name > span {
    vertical-align: middle;
}
/* style.css (在檔案末尾加入) */

/* --- Toggle Switch (切換開關) 樣式 --- */
.form-group .toggle-label {
    font-size: 0.9em;
    color: #495057;
    margin-left: 8px;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-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: .4s;
    border-radius: 28px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #2196F3;
}
input:checked + .slider:before {
    transform: translateX(22px);
}
/* style.css (在檔案末尾加入) */

/* 讓模式選擇器可以換行，以容納第三個選項 */
.mode-switcher {
    flex-wrap: wrap;
    gap: 15px 20px;
}

/* 商品收藏星號按鈕樣式 */
.product-favorite-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    color: #ced4da;
    padding: 0 8px 0 0;
    vertical-align: middle;
    transition: color 0.2s, transform 0.2s;
}
.product-favorite-btn:hover {
    transform: scale(1.2);
}
.product-favorite-btn.favorited {
    color: #ffc107;
}
.product-name > span {
    vertical-align: middle;
}
/* --- 只看新品按鈕 (藍色主題) --- */
.view-option-btn[data-filter="new"] {
    color: #007bff; /* 藍色文字 */
    border-color: #b8daff; /* 淡藍色邊框 */
}
.view-option-btn[data-filter="new"]:hover {
    background-color: #e9f5ff; /* 滑鼠移上去時的背景色 */
}
.view-option-btn[data-filter="new"].active {
    background-color: #007bff; /* 選中時的藍色背景 */
    color: #fff; /* 選中時的白色文字 */
    border-color: #007bff;
}
/* --- 品類洞察室 - 付費提示樣式 --- */
.ranking-list .placeholder-item {
    background-color: #f8f9fa; /* 給一個淡淡的底色 */
    border-radius: 8px;
    padding: 12px 10px !important; /* 覆蓋原有的 padding */
    border-bottom: none; /* 移除分隔線 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ranking-list .placeholder-item::before {
    /* 隱藏 placeholder 的排名數字 */
    content: '';
    display: none;
}

.placeholder-item .blurry-text {
    filter: blur(3px); /* 模糊效果 */
    user-select: none; /* 讓文字無法被選取 */
    color: #bbb;
    font-style: italic;
}

.placeholder-item .cta-button-tiny {
    background-color: #ff9800; /* 橘色按鈕 */
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap; /* 確保按鈕文字不斷行 */
    transition: background-color 0.2s;
}

.placeholder-item .cta-button-tiny:hover {
    background-color: #e68a00;
}
/* --- 查詢元數據 (如查詢時間) 樣式 --- */
.query-meta {
    text-align: right;
    font-size: 0.8em;
    color: #868e96;
    margin-top: -20px; /* 讓它往上靠近標題 */
    margin-bottom: 20px;
    font-style: italic;
}
/* --- 列表內搜尋框樣式 --- */
.momentum-buttons-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* 確保按鈕可以換行 */
}

.in-list-search-container {
    position: relative;
}

#in-list-search-box {
    padding: 8px 15px 8px 35px; /* 左側留出圖示空間 */
    border: 1px solid #ced4da;
    border-radius: 20px;
    min-width: 250px; /* 設定最小寬度 */
    font-size: 14px;
}

/* 在搜尋框內加入一個放大鏡圖示 */
.in-list-search-container::before {
    content: '🔍';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}
/* --- 表格排名欄位的內容對齊樣式 --- */
.rank-cell-content {
    display: flex;         /* 啟用 Flexbox 佈局 */
    align-items: center;   /* 關鍵：讓所有子項目垂直置中對齊 */
    gap: 8px;              /* 在星號和數字之間增加一個固定的間距 */
}
/* --- 搜尋情境摘要列樣式 --- */
.search-summary {
    font-size: 1.1em;
    color: #6c757d; /* 使用輔助文字的灰色 */
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
    margin-bottom: 25px;
    margin-top: -15px; /* 讓它往上靠近主標題 H2 */
}
/* --- 針對 WordPress 佈景主題的篩選器樣式微調 --- */
.filters-container .filter-group select {
    font-size: 15px;      /* 稍微縮小字體，讓文字有更多呼吸空間 */
    height: 48px;         /* 設定一個固定的高度，確保四個選單能完美水平對齊 */
    padding: 10px 15px;   /* 微調內部間距 */
    box-sizing: border-box; /* 確保 padding 和 border 不會意外撐大盒子 */
}
/* --- 針對 WordPress 嵌入後的標題樣式優化 --- */

/* 1. 修改主標題 (H1) */
.container header h1 {
    background: none; /* 移除漸層背景 */
    -webkit-background-clip: initial; /* 重置文字裁切效果 */
    -webkit-text-fill-color: initial; /* 重置文字填充顏色 */
    background-clip: initial;
    
    color: #2c3e50; /* 使用一個更沉穩、專業的深藍灰色，您也可以換成您品牌 Logo 的標準色 */
    font-size: 2.1em; /* 稍微縮小字體尺寸，讓它更好地融入頁面 */
    font-weight: 600; /* 可以稍微降低字重，看起來更柔和 */
}

/* 2. 微調主標題下方的描述文字 */
.container header p {
    font-size: 1.05em; /* 也可以稍微縮小一點 */
    max-width: 700px;
}

/* 3. 「步驟」標題的樣式維持不變，因為它的設計很好，提供了清晰的引導 */
/* .filter-step-title 的樣式可以不用修改 */
/* --- 針對 WordPress 佈景主題的表格樣式覆蓋 --- */

/* 1. 確保表格本身無邊框，並設定正確的 collapse 模式 */
.results table {
    border-collapse: separate; /* 確保邊框是分開的，而不是合併的 */
    border-spacing: 0;
    border: none;              /* 移除可能由主題添加的 table 邊框 */
}

/* 2. 針對儲存格 (th, td) 進行精準的邊框控制 */
.results table th,
.results table td {
    border: none;  /* 首先，強力移除所有邊框 */
    border-bottom: 1px solid #dee2e6; /* 然後，只加上我們想要的底部邊框 */
}

/* 3. (可選) 針對表頭(thead)最後一行的儲存格，可以稍微加粗底線，視覺上更好看 */
.results table thead th {
    border-bottom-width: 2px;
}
/* --- 會員資訊卡樣式 --- */
.member-info-card {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-left: 5px solid #007bff; /* 左側用藍色線條作為視覺提示 */
    border-radius: 8px;
    padding: 15px 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.member-info-greeting {
    font-size: 1.1em;
    color: #343a40;
}

.member-info-details {
    display: flex;
    gap: 25px; /* 讓方案和狀態分開一點 */
    font-size: 0.95em;
    color: #6c757d;
}

.member-info-details strong {
    color: #343a40;
    font-weight: 600;
}

.member-info-link {
    background-color: #007bff;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.member-info-link:hover {
    background-color: #0056b3;
    color: #fff;
}
/* --- 品類洞察室 (Category Rankings) 頁面樣式優化 --- */

/* 1. 頁首標題區優化 */
/* 讓「返回排行榜」的連結更清晰 */
.container > header > p:first-child a {
    display: inline-block;
    background-color: #f1f3f5;
    color: #495057;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 15px;
    transition: background-color 0.2s;
}
.container > header > p:first-child a:hover {
    background-color: #e9ecef;
}

/* 強化主標題 H1 的視覺權重 */
.container > header h1 {
    font-size: 2.1em;
    color: #2c3e50; /* 使用與另一頁面協調的專業藍灰色 */
    margin-bottom: 0.25em;
}


/* --- 品類洞察室 - 篩選器區塊樣式優化 --- */

.category-search-container {
    padding: 20px 25px;
    background-color: #f8f9fa; /* 使用一個更柔和的背景色 */
    border-radius: 12px;
    border: 1px solid #e9ecef;
    margin: 25px 0;
}

/* --- 品類洞察室 - 篩選器區塊最終對齊優化 --- */
.category-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* 讓所有 form-group 的底部對齊 */
    gap: 15px;
}

.category-search-form .form-group {
    display: flex;
    flex-direction: column; /* 讓 label 在控制項的上方 */
    gap: 5px;
}

/* 建立一個新的 class 來包裹開關，讓它模擬成一個輸入框 */
.toggle-wrapper {
    display: flex;
    align-items: center; /* 讓開關和文字在 wrapper 內垂直置中 */
    gap: 8px; /* 開關和文字之間的間距 */
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 0 12px;
}

/* 統一所有控制項的高度，這是完美對齊的關鍵 */
.category-search-form input[type="text"],
.category-search-form select,
.category-search-form .toggle-wrapper, /* 讓 wrapper 也遵循統一高度 */
.category-search-form .submit-button {
    height: 42px; 
    box-sizing: border-box;
}

/* 微調按鈕內文字的對齊 */
.category-search-form .submit-button {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 移除之前為對齊而加的 hacky 樣式 */
.category-search-form .form-group .toggle-switch {
    margin-top: 0;
    top: 0;
}

/* 3. 主頁籤樣式精修 */
.main-tab-nav {
    border-bottom: 2px solid #dee2e6; /* 讓底線更明顯 */
}

.main-tab-link.active {
    border-bottom-width: 3px; /* 讓 active 的頁籤底線更粗 */
    font-weight: 600;
    color: #0056b3; /* 使用更深的藍色 */
}

.main-tab-link:hover {
    background-color: #f8f9fa; /* 增加滑鼠移上去的背景色回饋 */
}
/* --- 品類洞察室 - 篩選收藏開關的最終對齊修正 --- */
/* --- 品類洞察室 - 篩選器寬度與佈局最終優化 --- */

.category-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
}

.category-search-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 關鍵：讓第一個 form-group (也就是品項搜尋框的容器) 自動填滿剩餘空間 */
.category-search-form .form-group:first-child {
    flex-grow: 1; /* 允許此項目延展 */
    min-width: 200px; /* 設定一個最小寬度，避免在極端情況下被過度壓縮 */
}

/* 確保輸入框能佔滿其父容器的寬度 */
.category-search-form .form-group:first-child input[type="text"] {
    width: 100%;
}

/* 為下拉選單設定一個固定的寬度，讓它們看起來一致 */
.category-search-form select {
    width: 150px; /* 您可以根據喜好微調這個寬度 */
}

/* 統一所有控制項的視覺高度 */
.category-search-form input[type="text"],
.category-search-form select,
.category-search-form .toggle-wrapper,
.category-search-form .submit-button {
    height: 44px;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    padding: 0 12px;
}

.category-search-form select {
    padding-top: 1px;
}

/* 開關容器的樣式 */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-wrapper .toggle-label {
    line-height: 42px;
    font-size: 14px;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

/* 確保按鈕不會被壓縮 */
.category-search-form .submit-button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ===================================================================
   響應式表格設計 (Responsive Table)
   =================================================================== */

/* 當螢幕寬度小於或等於 768px 時 (例如平板或手機)，套用以下樣式 */
@media (max-width: 768px) {

    /* 1. 隱藏原本的表頭 (thead) */
    .results table thead {
        display: none;
    }

    /* 2. 讓表格、tbody、tr、td 的行為都像區塊元素 */
    .results table, 
    .results table tbody, 
    .results table tr, 
    .results table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* 3. 將每一橫列 (tr) 變成一張獨立的卡片 */
    .results table tr {
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        padding: 10px;
    }

    /* 4. 讓儲存格 (td) 垂直排列，並在左側加上標題 */
    .results table td {
        text-align: right; /* 讓內容靠右，與左側的標題對齊 */
        padding-left: 50%;  /* 在左側留出空間給標題 */
        position: relative;
        border-bottom: 1px solid #f1f3f5; /* 卡片內部用更淡的分隔線 */
    }
    .results table td:last-child {
        border-bottom: none; /* 最後一格不需要分隔線 */
    }

    /* 5. 關鍵：使用 ::before 偽元素，將表頭的文字變成每一格的標題 */
    .results table td::before {
        content: attr(data-label); /* 讀取 data-label 屬性的內容 */
        position: absolute;
        left: 10px;
        width: calc(50% - 20px); /* 計算標題的寬度 */
        text-align: left;
        font-weight: 600;
        color: #343a40;
    }

    /* 6. 讓第一欄的排名數字特別突出 */
    .results table td:first-child {
        text-align: left;
        padding-left: 10px;
        font-size: 1.5em;
        line-height: 1.2;
    }
    .results table td:first-child::before {
        display: none; /* 第一欄不需要左側標題 */
    }
    .rank-cell-content {
        justify-content: flex-start; /* 讓星號和數字靠左 */
    }
}


/* --- 1. 電腦版預設樣式 (Desktop First) --- */
.ranking-list {
    list-style-type: none;
    padding: 15px 25px 25px 25px;
    margin: 0;
    counter-reset: rank-counter;
    flex-grow: 1;
    max-height: 450px;
    overflow-y: auto;
    position: relative; /* 為了讓付費提示能正確定位 */
}

/* 我們用 div 來模擬 li 的行為 */
.list-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #f1f3f5;
}
.list-item-card:last-of-type {
    border-bottom: none;
}

/* 電腦版排名數字 */
.list-item-card::before {
    counter-increment: rank-counter;
    content: counter(rank-counter);
    font-size: 1.2em;
    font-weight: 700;
    color: #868e96;
    min-width: 2em;
    text-align: center;
    flex-shrink: 0;
    margin-right: 15px;
}
/* ... (前三名的圓圈樣式不變) ... */

.list-item-card .product-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.list-item-card .product-name {
    font-weight: 600;
}
.list-item-card .product-rank {
    font-size: 0.85em;
    color: #6c757d;
}

/* 恢復付費模糊效果 */
.list-item-card.blurred {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}


/* ===================================================================
   品類洞察室 - 列表項目排版修正 (2025-07-01)
   =================================================================== */

/* 1. 將 li 自身設為 Flex 容器，並讓左右兩大區塊分開對齊 */
.ranking-list li {
    display: flex;                 /* 啟用 Flexbox 佈局 */
    justify-content: space-between;/* 關鍵：讓子元素之間有最大間距 (左右分開) */
    align-items: center;           /* 關鍵：讓所有子元素垂直置中對齊 */
    gap: 15px;                     /* 在左右區塊之間增加一點間距 */
}

/* 2. 設定 li 的排名數字 (::before 偽元素) 與內容垂直對齊 */
.ranking-list li::before {
    display: flex;
    align-items: center;           /* 讓數字本身也垂直置中 */
    height: 100%;                  /* 確保偽元素高度能撐開以利對齊 */
}


/* 3. 左側區塊 (商品主要資訊) */
.product-main-info {
    display: flex;                 /* 同樣設為 Flexbox */
    align-items: center;           /* 讓星號、商品名、圖示垂直置中 */
    gap: 8px;                      /* 內部元素間距 */
    flex-grow: 1;                  /* 關鍵：讓此區塊自動填滿所有剩餘空間 */
    min-width: 0;                  /* Flexbox 技巧：防止文字過長時破壞版面 */
}

/* 4. 右側區塊 (總營收排名) */
.product-rank {
    display: flex;
    flex-direction: column;        /* 讓 "總營收排名" 和 "排名變化" 垂直堆疊 */
    align-items: flex-end;         /* 讓文字靠右對齊 */
    flex-shrink: 0;                /* 防止此區塊被壓縮 */
    white-space: nowrap;           /* 防止文字換行 */
    font-size: 0.9em;              /* 稍微縮小字體，讓版面更和諧 */
}

/* 5. 修正排名變化的顏色，使其與舊版一致 */
.product-rank .rank-up { color: #dc3545; }
.product-rank .rank-down { color: #28a745; }
.product-rank .rank-neutral { color: #6c757d; }
.product-rank .rank-new { color: #007bff; }



/* ===================================================================
   響應式設計：手機版面優化 (最終修正版)
   =================================================================== */

/* 當螢幕寬度小於或等於 768px 時，套用以下樣式 */
@media (max-width: 768px) {

    /* --- 1. 基礎與通用調整 --- */
    body {
        padding: 0; 
    }
    .container, .product-page-container {
        padding: 20px 15px;
        margin-top: 0;
    }
    
    /* --- 2. 首頁相關樣式 --- */
    .hero-section {
        height: auto; 
        padding: 60px 20px;
    }
    .hero-content h1 {
        font-size: 2em; 
    }
    .hero-content p {
        font-size: 1em;
    }
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    .hero-buttons .btn {
        width: 80%;
        max-width: 280px;
        text-align: center;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }

    /* --- 3. 內容區塊標題 --- */
    .feature-item h3, .content-section h2, .why-upgrade h2, .target-audience h2, .faq h2 {
        font-size: 1.8em;
    }
    .target-audience ul {
        grid-template-columns: 1fr;
    }

    /* --- 4. 排行榜觀測站 (template-rankings-pro.php) --- */

    /* 4.1 篩選器響應式 */
    .filters-container {
        padding: 20px 15px;
    }
    .filter-step-title {
        font-size: 1.1em;
    }
    
    .mode-switcher {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .mode-switcher .input-with-icon, 
    .mode-switcher div[style*="display: flex"] {
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 關鍵修正：步驟二的篩選範圍，從格線佈局改為單欄垂直堆疊 */
    .filter-grid-2x2 {
        display: block; /* 放棄 Grid 佈局 */
    }
    .filter-grid-2x2 .filter-group {
        margin-bottom: 20px; /* 每個篩選項目之間的間距 */
    }
     .filter-grid-2x2 .filter-group:last-child {
        margin-bottom: 0;
    }
    
    .rank-type-cards-container {
        grid-template-columns: 1fr;
    }

    /* 4.2 排行榜表格響應式 (卡片化) */
    .results table thead {
        display: none;
    }
    .results table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        padding: 10px 15px;
    }
    .results table td {
        display: block;
        width: 100%;
        text-align: right;
        padding: 10px 0;
        padding-left: 115px;
        position: relative;
        border-bottom: 1px solid #f1f3f5;
    }
    .results table td:last-child {
        border-bottom: none;
    }
    .results table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 100px;
        text-align: left;
        font-weight: 600;
        color: #343a40;
    }
    .results table td:first-child {
        padding-left: 0;
        text-align: left;
        font-size: 1.5em;
        padding-bottom: 10px;
        border-bottom: 1px solid #dee2e6;
    }
    .results table td:first-child::before {
        display: none;
    }

    /* --- 5. 品類洞察室 (template-category-deep-dive.php) --- */
    
    .category-search-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .category-search-form select,
    .category-search-form .toggle-wrapper {
        width: 100%;
        box-sizing: border-box;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }
    
    .channel-card h3 {
        flex-wrap: wrap;
    }

   
	/* ===================================================================
   手機版 - 付費模糊區塊樣式補完
   =================================================================== */
.ranking-list .placeholder-item {
    display: flex; /* 改回 flex 讓內容水平排列 */
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    width: 100%;
    box-sizing: border-box;

    /* 確保樣式與普通卡片一致 */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 12px 15px !important;
    margin-bottom: 20px;
}

.ranking-list .placeholder-item::before {
    display: none; /* 確認不顯示排名數字 */
}

/* 確保模糊文字的字體大小正常 */
.placeholder-item .blurry-text {
    font-size: 1rem; /* 1rem 約等於 16px */
}
	
}
/* ===================================================================
   品類洞察室 - 列表排版最終修正 (桌面 + 手機)
   =================================================================== */

/* --- Part 1: 桌面版預設樣式 (確保恢復正常) --- */

/* 1.1: li 容器使用 Flexbox 佈局 */
.ranking-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 16px 0;
    border-bottom: 1px solid #f1f3f5;
}
.ranking-list li:last-child {
    border-bottom: none;
}

/* 1.2: 左側區塊 (商品主要資訊) */
.product-main-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
}
.product-name {
    font-weight: 600;
}

/* 1.3: 右側區塊 (排名) */
.product-rank {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.9em;
}

/* 1.4: 趨勢按鈕 */
.trend-chart-btn {
    flex-shrink: 0;
}


/* ===================================================================
   品類洞察室 - 手機版排版最終優化 (2025-07-01)
   =================================================================== */
@media (max-width: 768px) {

 
    
    .product-main-info .product-favorite-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1.6em;
        color: #d0d0d0;
    }
    .product-main-info .product-favorite-btn.favorited { color: #ffc107; }
    /* --- 1. 卡片基礎設定 (li) --- */
    .ranking-list li {
        display: block;
        position: relative;
        border: 1px solid #e9ecef;
        border-radius: 12px; /* 增加圓角，看起來更柔和 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
        padding: 70px 0 10px 0; /* 增加上方空間給排名和星號 */
        overflow: hidden; /* 確保內容不會溢出圓角 */
    }

    /* --- 2. 卡片頂部元素定位 --- */

    /* 排名圓圈 */
    .ranking-list li::before {
        content: counter(rank-counter);
        position: absolute;
        top: 18px; /* 微調垂直位置 */
        left: 18px; /* 微調水平位置 */
        width: 38px;
        height: 38px;
        border: 2px solid #e0e0e0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3em !important;
        font-weight: 600 !important;
        color: #343a40 !important;
        background-color: #fff !important;
        box-sizing: border-box;
    }
    .ranking-list li:nth-child(1)::before { border-color: #ffb300; }
    .ranking-list li:nth-child(2)::before { border-color: #5f6368; }
    .ranking-list li:nth-child(3)::before { border-color: #1a73e8; }

    /* 收藏星號 */
    .product-main-info .product-favorite-btn {
        position: absolute;
        top: 18px;
        right: 15px;
        font-size: 1.8em;
        color: #ced4da;
    }
    .product-main-info .product-favorite-btn.favorited { color: #ffc107; }


    /* --- 3. 卡片內的資料列樣式 (關鍵修正) --- */

    /* 隱藏桌面版的佈局容器，讓子元素可以直接被 li 控制 */
    .ranking-list li .product-main-info,
    .ranking-list li .product-rank {
        display: contents;
    }

    /* 定義每一「列」的樣式 */
    .ranking-list li .product-name,
    .ranking-list li .product-rank > span,
    .ranking-list li .trend-chart-btn {
        display: flex; /* 改用 Flexbox，更穩定 */
        justify-content: space-between; /* 讓標籤和內容左右分開 */
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 18px; /* 關鍵：在每一列增加水平內距 */
        border-bottom: 1px solid #f1f3f5;
        line-height: 1.5;
    }
    .ranking-list li .trend-chart-btn {
        border-bottom: none; /* 最後一列不需要底線 */
    }

    /* 3.1: 標籤 (左欄) - 使用 ::before 生成 */
    .ranking-list li .product-name::before,
    .ranking-list li .product-rank > span::before,
    .ranking-list li .trend-chart-btn::before {
        content: attr(data-label); /* 從 data-label 屬性讀取標籤文字 */
        font-weight: 400;
        color: #6c757d; /* 標籤使用灰色，與內容區分 */
        font-size: 14px;
    }

    /* 3.2: 內容值 (右欄) - 繼承自父元素 */
    .ranking-list li .product-name,
    .ranking-list li .product-rank > span {
        font-weight: 500;
        color: #343a40;
        font-size: 15px;
    }
    .ranking-list li .product-rank .rank-change-indicator {
        font-size: 15px; /* 確保字體大小一致 */
    }

    /* 趨勢圖示 */
    .ranking-list li .trend-chart-btn {
        font-size: 1.5em;
        color: #6c757d;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .ranking-list li .trend-chart-btn:hover {
        color: #007bff;
    }

    /* --- 4. 處理付費提示區塊的樣式 --- */
    .ranking-list .placeholder-item {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 18px !important;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        margin: 0 15px 20px 15px; /* 讓它與普通卡片對齊 */
        width: auto;
    }
    .ranking-list .placeholder-item::before {
        display: none !important;
    }
	/* --- 修正「排名變化」列在手機上的偏移問題 --- */
.ranking-list li .rank-change-indicator {
    margin-left: 0; /* 關鍵：將繼承自桌面的左外邊距歸零 */
}
}