#cp-checker-app.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#cp-checker-app .container {
    width: 100%;
    max-width: 600px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 24px;
    box-sizing: border-box;
}
#cp-checker-app h1 {
    font-size: 24px;
    color: #1877f2;
    text-align: center;
    margin-bottom: 20px;
}
/* 搜尋框釘在頂端：捲到下面看卡片或全等級表時也能直接改查詢，不用滑回去。
   top 用 main.js 量出來的 --header-height（頁首 .site-header-main 本身是 sticky 的）。
   上下內距對稱，清除叉叉是 top:50% 絕對定位，不對稱就會歪掉。 */
#cp-checker-app .search-area {
    display: flex;
    width: 100%;
    position: sticky;
    /* 往上多疊 4px：頁首高度是 JS 量的，行動裝置上網址列伸縮會有一兩 px 誤差，
       寧可稍微被頁首蓋住（蓋到的是上緣留白）也不要露出縫隙讓內容穿過去。 */
    top: calc(var(--header-height, 60px) - 4px);
    z-index: 1000;
    background-color: #ffffff;   /* 同 .container 底色，捲過去的內容才不會透出來 */
    padding: 12px 0;
    margin-bottom: 12px;
    transition: top 0.1s ease-in-out;
}
#cp-checker-app #cpSearchInput {
    flex-grow: 1;
    padding: 10px 15px;
    font-size: 16px;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}
#cp-checker-app #cpSearchInput:focus {
    border-color: #1877f2;
}
#cp-checker-app #statusMessage {
    text-align: center;
    color: #606770;
    margin-bottom: 20px;
    font-style: italic;
}
#cp-checker-app #resultsContainer {
    margin-top: 20px;
}
/* --- L15/L20/L25 用途說明 --- */
#cp-checker-app .cp-legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
}
#cp-checker-app .cp-legend-item {
    flex: 1 1 170px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7f8fa;
    border: 1px solid #dddfe2;
    border-left-width: 4px;
    border-radius: 10px;
    padding: 10px 12px;
}
#cp-checker-app .cp-legend-item.lv15 { border-left-color: #2f9e57; }
#cp-checker-app .cp-legend-item.lv20 { border-left-color: #2b6cb0; }
#cp-checker-app .cp-legend-item.lv25 { border-left-color: #d97706; }
#cp-checker-app .cp-legend-badge {
    flex: none;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .5px;
    padding: 5px 9px;
    border-radius: 6px;
}
#cp-checker-app .cp-legend-item.lv15 .cp-legend-badge { background: #2f9e57; }
#cp-checker-app .cp-legend-item.lv20 .cp-legend-badge { background: #2b6cb0; }
#cp-checker-app .cp-legend-item.lv25 .cp-legend-badge { background: #d97706; }
#cp-checker-app .cp-legend-desc {
    font-size: 13px;
    color: #3a3b3c;
    line-height: 1.35;
}
/* 卡片內 L15/L20/L25 標籤上對應色，與上方說明呼應 */
#cp-checker-app .pokemon-info .cp.lv15 span { color: #2f9e57; font-weight: 700; }
#cp-checker-app .pokemon-info .cp.lv20 span { color: #2b6cb0; font-weight: 700; }
#cp-checker-app .pokemon-info .cp.lv25 span { color: #d97706; font-weight: 700; }
#cp-checker-app .pokemon-card {
    display: flex;
    align-items: center;
    background-color: #f7f8fa;
    border: 1px solid #dddfe2;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s, transform 0.2s;
}
#cp-checker-app .pokemon-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
#cp-checker-app .pokemon-card img {
    width: 75px;
    height: 75px;
    margin-right: 15px;
    background-color: #e9ebee;
    border-radius: 50%;
}
#cp-checker-app .pokemon-info {
    flex-grow: 1;
}
#cp-checker-app .pokemon-info h2 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #050505;
}
#cp-checker-app .pokemon-info .id {
    color: #606770;
    font-size: 14px;
    margin-bottom: 10px;
}
#cp-checker-app .cp-container {
    display: flex;
    justify-content: space-around; /* 改為平均分佈 */
    width: 100%; /* 確保容器佔滿寬度 */
    margin-top: 10px; /* 增加頂部間距 */
}
#cp-checker-app .pokemon-info .cp {
    font-size: 20px;
    font-weight: bold;
    color: #e63946;
    text-align: center; /* 文字置中 */
    line-height: 1.2; /* 調整行高 */
}
#cp-checker-app .pokemon-info .cp span {
    font-size: 12px;
    font-weight: normal;
    color: #606770;
    display: block; /* 讓標籤自成一行 */
}
/* --- 【新增】叉叉按鈕樣式 --- */
/* 這裡原本有 position: relative，但它跟上面的 position: sticky 是同一個選擇器、又寫在後面，
   會直接把 sticky 蓋掉（搜尋框就釘不住了）。sticky 本身也是「已定位元素」，
   絕對定位的叉叉一樣會以它為基準，所以不需要再宣告 relative。 */

#cp-checker-app .clear-search-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 22px;
    color: #888;
    cursor: pointer;
    padding: 0 5px;
    display: none; /* 預設隱藏 */
}

#cp-checker-app .clear-search-btn:hover {
    color: #333;
}

/* --- 【修改】讓 input 的文字不會被按鈕蓋住 --- */
#cp-checker-app #cpSearchInput {
    padding-right: 35px; /* 增加右側內距 */
}
/* --- 全等級 CP 對照表（鎖定單一寶可夢時顯示） --- */
#cp-checker-app .lv-table-section {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #dddfe2;
}
#cp-checker-app .lv-table-section h2 {
    font-size: 20px;
    margin: 0 0 10px;
    color: #1c1e21;
}
#cp-checker-app .lv-table-intro,
#cp-checker-app .lv-table-foot {
    color: #606770;
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 14px;
}
#cp-checker-app .lv-table-foot { margin: 12px 0 0; font-size: 13px; }
/* 窄螢幕時表格自己橫向捲，不讓整頁跑版 */
#cp-checker-app .lv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#cp-checker-app .lv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
#cp-checker-app .lv-table caption {
    caption-side: top;
    text-align: left;
    color: #606770;
    font-size: 13px;
    padding-bottom: 8px;
}
#cp-checker-app .lv-table th,
#cp-checker-app .lv-table td {
    border: 1px solid #e4e6eb;
    padding: 7px 10px;
    text-align: right;
    white-space: nowrap;
}
#cp-checker-app .lv-table thead th {
    background: #f7f8fa;
    color: #1c1e21;
    font-weight: 700;
    position: sticky;
    top: 0;
}
#cp-checker-app .lv-table tbody th { text-align: left; font-weight: 700; background: #fafbfc; }
#cp-checker-app .lv-table .cp-max { font-weight: 700; color: #2f9e57; }
#cp-checker-app .lv-table .cp-min { color: #606770; }
#cp-checker-app .lv-table .lv-note,
#cp-checker-app .lv-table thead th:last-child {   /* 表頭要跟著內容一起靠左 */
    text-align: left;
    white-space: normal;
    color: #606770;
    font-size: 13px;
    width: 42%;
}
#cp-checker-app .lv-table thead th:last-child { color: #1c1e21; font-size: 14px; }
#cp-checker-app .lv-table tbody tr:nth-child(even) td,
#cp-checker-app .lv-table tbody tr:nth-child(even) th { background: #fcfcfd; }
#cp-checker-app .lv-table tr.key-lv th,
#cp-checker-app .lv-table tr.key-lv td { background: #eef7f1; }
#cp-checker-app .lv-table tr.bb-lv th,
#cp-checker-app .lv-table tr.bb-lv td { background: #fff7e8; }
/* --- 高 IV CP·HP 對照表（IV 100%～91.1%） --- */
#cp-checker-app .iv-table-block { margin-bottom: 26px; }
#cp-checker-app .iv-table {
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 560px;
}
#cp-checker-app .iv-table th,
#cp-checker-app .iv-table td { border: 1px solid #e4e6eb; padding: 4px 7px; text-align: right; }
#cp-checker-app .iv-table thead th { background: #f7f8fa; color: #1c1e21; font-weight: 700; text-align: center; }
#cp-checker-app .iv-table td.ivpct { text-align: left; color: #606770; }
#cp-checker-app .iv-table tr.hundo td.ivpct { color: #e63946; font-weight: 800; }
#cp-checker-app .iv-table td.ivhp { color: #606770; }
#cp-checker-app .iv-table td.ivcell { color: #fff; font-weight: 700; text-align: center; }
#cp-checker-app .iv-table td.v15 { background: #e63946; }
#cp-checker-app .iv-table td.v14 { background: #2b6cb0; }
#cp-checker-app .iv-table td.v13 { background: #2f9e57; }
#cp-checker-app .iv-table td.v12 { background: #d98324; }
#cp-checker-app .iv-table td.v11 { background: #8a8f98; }
#cp-checker-app .iv-table tbody tr:nth-child(even) td:not(.ivcell) { background: #fcfcfd; }
#cp-checker-app .iv-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; font-size: 12px; color: #606770; }
#cp-checker-app .iv-legend span { display: inline-flex; align-items: center; gap: 5px; }
#cp-checker-app .iv-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* --- 單隻寶可夢深入介紹（屬性/定位/招式/PvP）：目前僅烈空坐，用於收錄測試 --- */
#cp-checker-app .mon-detail {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #dddfe2;
}
#cp-checker-app .mon-detail h2 {
    font-size: 20px;
    margin: 22px 0 10px;
    color: #1c1e21;
}
#cp-checker-app .mon-detail h2:first-child { margin-top: 0; }
#cp-checker-app .mon-detail-lead,
#cp-checker-app .mon-detail-note {
    color: #3a3b3c;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 12px;
}
#cp-checker-app .mon-detail-note { color: #606770; font-size: 13px; }
#cp-checker-app .mon-detail strong { color: #1c1e21; font-weight: 700; }
/* 屬性剋制 chips */
#cp-checker-app .mon-matchup { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; }
#cp-checker-app .mm-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#cp-checker-app .mm-label {
    flex: none; font-size: 13px; font-weight: 700; color: #606770;
    width: 44px;
}
#cp-checker-app .mm-chip {
    font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 9px;
    display: inline-flex; align-items: center; gap: 6px;
}
#cp-checker-app .mm-chip em { font-style: normal; font-size: 11.5px; opacity: .85; font-variant-numeric: tabular-nums; }
#cp-checker-app .mm-chip.wk  { background: #fdecec; color: #c5221f; }
#cp-checker-app .mm-chip.wk.dbl { background: #f9d5d3; color: #a50e0e; font-weight: 800; }
#cp-checker-app .mm-chip.rs  { background: #e7f5ec; color: #1e7e46; }
/* 推薦招式 */
#cp-checker-app .mon-moves { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
#cp-checker-app .mon-moves li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
#cp-checker-app .mon-moves .mv-k { flex: none; width: 78px; font-size: 12.5px; font-weight: 700; color: #606770; }
#cp-checker-app .mon-moves .mv-v { font-size: 14px; color: #1c1e21; }
#cp-checker-app .mon-moves .mv-v b { color: #1877f2; }
#cp-checker-app .mon-moves .mv-v em { font-style: normal; font-size: 12px; color: #d97706; font-weight: 700; }
/* PvP 聯盟條 */
#cp-checker-app .mon-league { display: grid; gap: 10px; margin: 6px 0 4px; }
#cp-checker-app .ml-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; }
#cp-checker-app .ml-name { font-size: 13.5px; font-weight: 600; color: #1c1e21; }
#cp-checker-app .ml-bar { height: 9px; background: #e9ebee; border-radius: 999px; overflow: hidden; }
#cp-checker-app .ml-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1877f2, #4aa3e8); }
#cp-checker-app .ml-rk { font-size: 12.5px; color: #606770; font-variant-numeric: tabular-nums; white-space: nowrap; }
#cp-checker-app .ml-rk b { color: #1c1e21; font-size: 13.5px; }
@media (max-width: 480px) {
    #cp-checker-app .ml-row { grid-template-columns: 64px 1fr; }
    #cp-checker-app .ml-rk { grid-column: 2; text-align: right; }
}

/* --- 站內連結：卡片標題與「相關寶可夢」 ---
   這些是真的 <a href>（給 Google 爬），但點擊被攔下來走即時篩選，
   所以樣式上刻意收斂一點，不要看起來像會跳走的外部連結。 */
#cp-checker-app .pokemon-info h2 a.mon-link {
    color: inherit;
    text-decoration: none;
}
#cp-checker-app .pokemon-info h2 a.mon-link:hover {
    color: #1877f2;
    text-decoration: underline;
}
#cp-checker-app .mon-related {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #dddfe2;
}
#cp-checker-app .mon-related h2 {
    font-size: 18px;
    margin: 0 0 10px;
    color: #1c1e21;
}
#cp-checker-app .mon-related p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.9;
    color: #3a3b3c;
}
#cp-checker-app .mon-related strong { color: #606770; font-weight: 600; }
#cp-checker-app .mon-related a.mon-link {
    color: #1877f2;
    text-decoration: none;
    /* 手機上這些連結會排得很密，撐開一點才好按 */
    padding: 2px 4px;
    border-radius: 4px;
}
#cp-checker-app .mon-related a.mon-link:hover { background: #eaf2fd; text-decoration: underline; }
#cp-checker-app .mon-related .mon-cur { color: #1c1e21; font-weight: 800; }