/* ================================================================
   色彩搭配页专属（color-palettes.html）
   源：pages.css（原第 4123-4488 行区间内容，按需拆分）
   ================================================================ */

.cp-palette + .cp-palette {
    margin-top: var(--space-24);
}
.cp-palette:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.30);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.10);
}
.cp-palette-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-12); margin-bottom: var(--space-12);
}
.cp-palette-num {
    font-family: var(--font-mono);
    font-size: var(--fs-26);
    font-weight: 800;
    color: rgba(93, 151, 67, 0.30);
}
.cp-palette-name {
    flex: 1;
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--text-primary);
}
.cp-palette-tag {
    padding: var(--space-2) var(--space-12);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.11);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 700;
}
/* 预览渐变（每套配色） */
.cp-palette-preview {
    height: 96px;
    border-radius: var(--radius-8); margin-bottom: var(--space-12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-normal);
}
.cp-palette:hover .cp-palette-preview {
    transform: scale(1.015);
}
.cp-palette--deep-space      .cp-palette-preview { background: linear-gradient(120deg, #0f172a, #1e3a8a, #38bdf8, #0ea5e9, #020617); }
.cp-palette--midnight-violet .cp-palette-preview { background: linear-gradient(120deg, #1a1a2e, #16213e, #0f3460, #e94560, #533483); }
.cp-palette--minimal-white   .cp-palette-preview { background: linear-gradient(120deg, #f8f9fa, #ffffff, #2563eb, #64748b, #1e293b); }
.cp-palette--hacker-green    .cp-palette-preview { background: linear-gradient(120deg, #1b1b1b, #0d2818, #00ff88, #00cc6a, #003d1a); }
.cp-palette--amber-dusk      .cp-palette-preview { background: linear-gradient(120deg, #1c1917, #451a03, #f59e0b, #d97706, #fbbf24); }
.cp-palette--ocean-heart     .cp-palette-preview { background: linear-gradient(120deg, #0f2b3d, #164e63, #06b6d4, #22d3ee, #0891b2); }
.cp-palette--rose-flame      .cp-palette-preview { background: linear-gradient(120deg, #2d0a1e, #881337, #f43f5e, #fb7185, #e11d48); }
.cp-palette--forest-realm    .cp-palette-preview { background: linear-gradient(120deg, #0f1f0f, #14532d, #22c55e, #4ade80, #166534); }
.cp-palette--cyberpunk       .cp-palette-preview { background: linear-gradient(120deg, #0d0221, #ff2a6d, #05d9e8, #ffce00, #7700ff); }
.cp-palette--japanese-wabi   .cp-palette-preview { background: linear-gradient(120deg, #fefae0, #faedcd, #bc6c25, #606c38, #283618); }
.cp-palette--morandi         .cp-palette-preview { background: linear-gradient(120deg, #8a7f7e, #a68a7c, #d4a373, #ccd5ae, #fefae0); }
.cp-palette--aurora          .cp-palette-preview { background: linear-gradient(120deg, #0c1220, #1a365d, #5d9743, #a78bfa, #38bdf8); }
/* 色值 chips */
.cp-palette-colors {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-10); margin-bottom: var(--space-12);
}
.cp-color-chip {
    position: relative;
    height: 58px;
    border-radius: var(--radius-8);
    background: var(--chip-color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-end;
    justify-content: center; padding-bottom: var(--space-4);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cp-color-chip:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.cp-color-chip span {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
}
.cp-palette-desc {
    margin-bottom: var(--space-12);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
.cp-palette-tags {
    display: flex;
    flex-wrap: wrap; gap: var(--space-6);
}
.cp-palette-tags span {
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.10);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 600;
}
/* 配色建议 */
.cp-tips {
    margin-top: var(--space-48);
}
.cp-tips-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-16);
}
.cp-tip-card {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.cp-tip-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.cp-tip-icon {
    display: block;
    margin-bottom: var(--space-10);
    font-size: var(--fs-24);
}
.cp-tip-card h3 { margin-bottom: var(--space-6);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}
.cp-tip-card p {
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
/* enrich：UI 落地 */
.cp-enrich, .cp-contrast {
    padding-top: var(--space-32);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}
.cp-ui-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}
.cp-preview-card {
    padding: var(--space-20);
    border-radius: var(--radius-12);
    border: 1px solid var(--border-light);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.cp-preview-card .cp-preview-badge {
    display: inline-block;
    margin-bottom: var(--space-10);
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    font-size: var(--fs-11);
    font-weight: 700;
}
.cp-preview-warm .cp-preview-badge  { background: rgba(234, 88, 12, 0.12); color: #c2570c; }
.cp-preview-cool .cp-preview-badge  { background: rgba(59, 130, 246, 0.12); color: #2f66d0; }
.cp-preview-card .cp-preview-badge:first-child { background: rgba(93, 151, 67, 0.12); color: var(--primary-dark); }
.cp-preview-card h3 { margin-bottom: var(--space-6);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.cp-preview-card p { margin-bottom: var(--space-12);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.cp-preview-card button {
    padding: var(--space-8) var(--space-20);
    border-radius: var(--radius-6);
    font-size: var(--fs-13);
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.cp-preview-warm button { background: #ea580c; }
.cp-preview-cool button { background: #2563eb; }
.cp-preview-card button:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}
.cp-method-grid, .cp-contrast-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
    margin-top: var(--space-16);
}
.cp-method-grid article, .cp-contrast-grid article {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
}
.cp-method-grid h3, .cp-contrast-grid h3 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}
.cp-method-grid p, .cp-contrast-grid p {
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.cp-snippet {
    margin-top: var(--space-16);
}
.cp-snippet h3 {
    margin-bottom: var(--space-10);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.cp-snippet pre {
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: #41533a;
    overflow-x: auto;
}
.cp-do-dont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    margin-top: var(--space-16);
}
.cp-do-dont > div {
    padding: var(--space-16) var(--space-20);
    border-radius: var(--radius-8);
}
.cp-do-dont > div:first-child {
    border: 1px solid rgba(93, 151, 67, 0.25);
    background: rgba(93, 151, 67, 0.06);
}
.cp-do-dont > div:last-child {
    border: 1px solid rgba(220, 38, 38, 0.22);
    background: rgba(220, 38, 38, 0.05);
}
.cp-do-dont h4 {
    margin-bottom: var(--space-10);
    font-size: var(--fs-14);
    font-weight: 700;
}
.cp-do-dont > div:first-child h4 { color: var(--primary-dark); }
.cp-do-dont > div:last-child h4 { color: #b91c1c; }
.cp-do-dont li {
    position: relative;
    padding: 4px 0 4px 20px;
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.cp-do-dont > div:first-child li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
}
.cp-do-dont > div:last-child li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 700;
}
@media (max-width: 1199px) {
    .cp-tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991px) {
    .cp-palette-colors {
        grid-template-columns: repeat(5, 1fr);
    }

    .cp-ui-preview, .cp-method-grid, .cp-contrast-grid, .cp-do-dont {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 479px) {
    .cp-palette-colors {
        grid-template-columns: repeat(2, 1fr);
    }

    .cp-tips-grid {
        grid-template-columns: 1fr;
    }
}
/* ================================================================
   不息 commit 专题页（cm-）— 规则已拆分到 pages-commit.css
   ================================================================ */