/* 31 · 衣服串色补救 —— 视觉母题「色卡实验台」
   独立布局：顶部八色色带 + 左侧分类台 / 右侧面料卡；结果用横向流程链与红色禁用条。 */
.b29.cb-wrap {
    --b29-bg: #faf8f4;
    --b29-surface: #ffffff;
    --b29-surface-2: #f5f4f1;
    --b29-ink: #22262f;
    --b29-sub: #525967;
    --b29-muted: #8a909c;
    --b29-line: #e6e5e1;
    --b29-line-strong: #d3d4d2;
    --b29-accent: #3b5aa6;
    --b29-accent-2: #dc775a;
    --b29-tint: #e9eefb;
    --b29-radius: 16px;
    --b29-radius-sm: 9px;
}
:root[data-theme="dark"] .b29.cb-wrap {
    --b29-bg: #11131a;
    --b29-surface: #1b1e28;
    --b29-surface-2: #232735;
    --b29-ink: #edf0f8;
    --b29-sub: #bbc2d2;
    --b29-muted: #8a93a6;
    --b29-line: #2e3342;
    --b29-line-strong: #3c4356;
    --b29-accent: #9ab4f5;
    --b29-accent-2: #f0a184;
    --b29-tint: #232c47;
}
.cb-hero h1 em { font-style: normal; color: var(--b29-accent-2); }
.cb-swatches { max-width: var(--b29-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(8, 1fr); height: 8px; gap: 3px; }
.cb-swatches i:nth-child(1) { background: #e9c9b8; }
.cb-swatches i:nth-child(2) { background: #dc775a; }
.cb-swatches i:nth-child(3) { background: #d9a441; }
.cb-swatches i:nth-child(4) { background: #7fa269; }
.cb-swatches i:nth-child(5) { background: #4e8f92; }
.cb-swatches i:nth-child(6) { background: #3b5aa6; }
.cb-swatches i:nth-child(7) { background: #715c98; }
.cb-swatches i:nth-child(8) { background: #9c8f83; }

.cb-console { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 0;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); }
.cb-console-form { padding: 28px 28px 24px; background: var(--b29-surface); }
.cb-console-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .18em; color: var(--b29-accent); margin-bottom: 12px; }
.cb-console-form h2 { font-size: var(--b29-xl); margin-bottom: 20px; }
.cb-question { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.cb-question .b29-chip { border-radius: 8px; }
.cb-console-side { padding: 28px 22px; background: var(--b29-surface-2); border-left: 1px solid var(--b29-line); }
.cb-side-title { font-size: var(--b29-sm); font-weight: 800; letter-spacing: .1em; color: var(--b29-accent); margin-bottom: 16px; }
.cb-fabric-card { border-radius: var(--b29-radius-sm); background: var(--b29-surface); border: 1px solid var(--b29-line); padding: 18px; }
.cb-fabric-card .cb-fc-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.cb-fc-dot { width: 30px; height: 30px; border-radius: 8px; background: var(--b29-accent); }
.cb-fabric-card h3 { font-size: var(--b29-md); }
.cb-fabric-card dl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 7px 8px; font-size: var(--b29-sm); margin: 0; line-height: 1.7; }
.cb-fabric-card dt { color: var(--b29-muted); }
.cb-fabric-card dd { margin: 0; color: var(--b29-sub); }
.cb-side-foot { margin-top: 16px; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.8; }

.cb-verdict { padding: 18px 20px; border-radius: var(--b29-radius); background: var(--b29-tint); margin-bottom: 22px;
    font-size: var(--b29-sm); line-height: 1.85; border-left: 5px solid var(--b29-accent); }
.cb-verdict b { color: var(--b29-accent); }
/* 横向流程链：用 ::after 连接箭头，非卡片网格 */
.cb-chain { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; }
.cb-step { flex: 1 0 190px; position: relative; padding: 18px 16px 16px; border-radius: var(--b29-radius-sm);
    background: var(--b29-surface); border: 1.5px solid var(--b29-line-strong); }
.cb-step::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
    color: var(--b29-accent); font-size: 18px; font-weight: 800; z-index: 2; }
.cb-step:last-child::after { display: none; }
.cb-step-no { display: inline-block; font-family: var(--b29-mono); font-size: var(--b29-xs); font-weight: 800;
    color: var(--b29-accent); background: var(--b29-tint); padding: 2px 9px; border-radius: 999px; margin-bottom: 10px; }
.cb-step h3 { font-size: var(--b29-base); margin-bottom: 7px; }
.cb-step p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.75; margin: 0 0 8px; }
.cb-step small { color: var(--b29-warn); font-size: var(--b29-xs); line-height: 1.7; display: block; }
.cb-ban { margin-top: 18px; padding: 17px 19px; border-radius: var(--b29-radius-sm);
    background: var(--b29-danger-tint); border: 1.5px dashed var(--b29-danger); }
.cb-ban h3 { color: var(--b29-danger); font-size: var(--b29-md); margin-bottom: 9px; }
.cb-ban ul { margin: 0; padding-left: 20px; font-size: var(--b29-sm); line-height: 1.85; color: var(--b29-sub); }
.cb-ban b { color: var(--b29-danger); }

.cb-prevent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cb-prevent-item { padding: 16px; border-radius: var(--b29-radius-sm); border: 1px solid var(--b29-line); background: var(--b29-surface); }
.cb-prevent-item b { display: block; font-size: var(--b29-sm); margin-bottom: 5px; }
.cb-prevent-item small { font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.7; }

@media (max-width: 900px) {
    .cb-console { grid-template-columns: minmax(0, 1fr); }
    .cb-console-side { border-left: 0; border-top: 1px solid var(--b29-line); }
    .cb-prevent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .cb-console-form, .cb-console-side { padding: 18px 16px; }
    .cb-prevent { grid-template-columns: minmax(0, 1fr); }
    .cb-step { flex-basis: 82%; }
    .cb-swatches { height: 5px; }
}