/* 27 · 猫咪品种识别 —— 视觉母题「花色调色盘」：莓紫 / 圆点矩阵 / 横向候选条
   独立布局：调色盘插画、七组紧凑筛选、横向花色条、斜纹 AI 区，与犬种档案卡完全不同。 */
.t28.cb-wrap {
    --t28-bg: #fbf5fa;
    --t28-surface: #fffdfd;
    --t28-surface-2: #f5eaf2;
    --t28-ink: #352236;
    --t28-sub: #634c63;
    --t28-muted: #987f96;
    --t28-line: #ecdce8;
    --t28-accent: #a2508f;
    --t28-accent-2: #4d8fa8;
    --t28-soft: #f6e5f1;
    --t28-on-accent: #ffffff;
    --t28-ok: #3d7a63;
    --t28-warn: #9a6b12;
    --t28-danger: #a6485e;
    --t28-ok-soft: #e1f0e9;
    --t28-warn-soft: #faf0d5;
    --t28-danger-soft: #f8e5eb;
    --t28-radius: 22px;
    --t28-radius-sm: 12px;
    --t28-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --t28-shadow: 0 8px 28px rgba(162,80,143,.09);
}
:root[data-theme="dark"] .t28.cb-wrap {
    --t28-bg: #160f17;
    --t28-surface: #211720;
    --t28-surface-2: #2b1e2a;
    --t28-ink: #f8ebf5;
    --t28-sub: #d9bed4;
    --t28-muted: #ab8ea6;
    --t28-line: #3c2a3a;
    --t28-accent: #e6a0d3;
    --t28-accent-2: #8ec6dc;
    --t28-soft: #3a2540;
    --t28-on-accent: #160f17;
    --t28-ok: #7fd0ac;
    --t28-warn: #ecc079;
    --t28-danger: #f39ab4;
    --t28-ok-soft: #183429;
    --t28-warn-soft: #372c18;
    --t28-danger-soft: #3a202c;
    --t28-shadow: 0 8px 28px rgba(0,0,0,.42);
}
.cb-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding: 34px 0 26px; }
.cb-hero h1 em { display: block; font-style: normal; font-size: .54em; color: var(--t28-accent-2); margin-top: 10px; }
.cb-palette { display: grid; grid-template-columns: repeat(4, 52px); gap: 12px; justify-content: center;
    padding: 22px; border-radius: 26px; background: var(--t28-surface); box-shadow: var(--t28-shadow); }
.cb-palette i { width: 52px; height: 52px; border-radius: 50%; box-shadow: inset -8px -8px 14px rgba(0,0,0,.12); }
.cb-p1 { background: #e9a45a; } .cb-p2 { background: #4b4a4a; } .cb-p3 { background: #f3ede1; }
.cb-p4 { background: #8d6b4d; } .cb-p5 { background: #d7c9b0; } .cb-p6 { background: #6b5a78; }
.cb-p7 { background: #c96b6b; } .cb-p8 { background: linear-gradient(135deg, #f0e6d2 50%, #83664f 50%); }
.cb-palette span { grid-column: 1 / -1; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--t28-accent); letter-spacing: .08em; }

.cb-quick { border-top: 4px solid var(--t28-accent); }
.cb-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cb-fgroup { padding: 10px 12px; border-radius: 12px; background: var(--t28-surface-2); }
.cb-fgroup > label { display: block; font-size: 13px; font-weight: 750; margin-bottom: 6px; }

/* 横向候选条 */
.cb-cards { display: grid; gap: 12px; }
.cb-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center;
    padding: 16px 18px; border-radius: 18px; background: var(--t28-surface); border: 1px solid var(--t28-line);
    border-left: 5px solid var(--t28-accent); box-shadow: var(--t28-shadow); }
.cb-dot { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
    font-size: 26px; background: var(--t28-soft); }
.cb-card h3 { font-size: 17px; margin-bottom: 3px; }
.cb-card .cb-rank { font-size: 11.5px; color: var(--t28-muted); }
.cb-card p { font-size: 13.5px; line-height: 1.7; color: var(--t28-sub); margin: 7px 0 0; }
.cb-hits { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cb-hits span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--t28-ok-soft); color: var(--t28-ok); }

/* 斜纹 AI 区 */
.cb-ai-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 18px; padding: 16px 18px; border-radius: 16px; color: var(--t28-ink);
    background: repeating-linear-gradient(135deg, var(--t28-soft) 0 14px, var(--t28-surface) 14px 28px);
    border: 1px solid var(--t28-line); }
.cb-ai-bar span { font-size: 13.5px; line-height: 1.7; }
.cb-wrap .t28-table tr:hover { background: var(--t28-soft); }

@media (max-width: 860px) { .cb-hero { grid-template-columns: minmax(0, 1fr); } .cb-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cb-features { grid-template-columns: minmax(0, 1fr); } .cb-card { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 13px; } .cb-dot { width: 48px; height: 48px; font-size: 20px; } .cb-palette { grid-template-columns: repeat(4, 40px); gap: 8px; } .cb-palette i { width: 40px; height: 40px; } }