/* 37 · 猫呕吐自查 —— 视觉母题「观察卡矩阵 / 24 小时时间线」
   独立布局：3×2 大观察卡（含色块图标）+ 参数区；结果是横向分级带与双栏红旗 / 带医记录。 */
.b29.vc-wrap {
    --b29-bg: #faf6ed;
    --b29-surface: #fffdf7;
    --b29-surface-2: #f7f0e3;
    --b29-ink: #2d281f;
    --b29-sub: #625a4c;
    --b29-muted: #978e7e;
    --b29-line: #ebe1cf;
    --b29-line-strong: #dacbb1;
    --b29-accent: #b8752f;
    --b29-accent-2: #5b7b6b;
    --b29-tint: #f9ecdb;
    --b29-radius: 17px;
    --b29-radius-sm: 10px;
}
:root[data-theme="dark"] .b29.vc-wrap {
    --b29-bg: #16130e;
    --b29-surface: #221d15;
    --b29-surface-2: #2b251a;
    --b29-ink: #f4ecdd;
    --b29-sub: #cbbfa9;
    --b29-muted: #9e927d;
    --b29-line: #3a3224;
    --b29-line-strong: #4d422e;
    --b29-accent: #e6ae6c;
    --b29-accent-2: #95c4a9;
    --b29-tint: #3b2d1c;
}
.vc-hero h1 em { font-style: normal; color: var(--b29-accent); display: block; font-size: .57em; margin-top: 10px; }

.vc-console { border: 1px solid var(--b29-line); border-radius: var(--b29-radius); background: var(--b29-surface);
    box-shadow: var(--b29-shadow); overflow: hidden; }
.vc-console-head { padding: 26px 26px 0; }
.vc-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--b29-accent); margin-bottom: 11px; }
.vc-console-head h2 { font-size: var(--b29-xl); margin-bottom: 6px; }
.vc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px 26px 0; }
.vc-card { position: relative; display: flex; align-items: center; gap: 13px; cursor: pointer; padding: 15px 16px;
    border: 1.5px solid var(--b29-line-strong); border-radius: var(--b29-radius-sm); background: var(--b29-surface-2); transition: all .16s; }
.vc-card:hover { border-color: var(--b29-accent); transform: translateY(-2px); }
.vc-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vc-card:has(input:checked) { border-color: var(--b29-accent); background: var(--b29-tint); box-shadow: var(--b29-shadow); }
.vc-card-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--b29-surface); font-size: 21px; border: 1px solid var(--b29-line); }
.vc-card b { display: block; font-size: var(--b29-sm); }
.vc-card small { display: block; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.6; margin-top: 3px; }
.vc-card.is-red .vc-card-ic { background: var(--b29-danger-tint); }
.vc-card input:focus-visible ~ .vc-card-txt { outline: 2px solid var(--b29-accent); outline-offset: 3px; }
.vc-params { padding: 20px 26px 24px; }
.vc-flags { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

.vc-level { border-radius: var(--b29-radius); padding: 22px 24px; margin-bottom: 20px; border: 2px solid var(--b29-danger); background: var(--b29-danger-tint); }
.vc-level--2 { border-color: var(--b29-warn); background: var(--b29-warn-tint); }
.vc-level--1 { border-color: var(--b29-ok); background: var(--b29-ok-tint); }
.vc-level-code { font-family: var(--b29-mono); font-size: var(--b29-xs); font-weight: 800; letter-spacing: .12em; color: var(--b29-danger); }
.vc-level--2 .vc-level-code { color: var(--b29-warn); }
.vc-level--1 .vc-level-code { color: var(--b29-ok); }
.vc-level h3 { font-size: var(--b29-xl); margin: 8px 0; }
.vc-level p { font-size: var(--b29-sm); line-height: 1.8; margin: 0; }
.vc-col { padding: 20px 22px; border-radius: var(--b29-radius); background: var(--b29-surface); border: 1px solid var(--b29-line); }
.vc-col h3 { font-size: var(--b29-md); margin-bottom: 13px; }
.vc-col--red { border-top: 4px solid var(--b29-danger); }
.vc-col--red h3 { color: var(--b29-danger); }
.vc-col--note { border-top: 4px solid var(--b29-accent-2); }
.vc-col--note h3 { color: var(--b29-accent-2); }
.vc-col ul { list-style: none; margin: 0; padding: 0; }
.vc-col li { position: relative; padding-left: 21px; font-size: var(--b29-sm); line-height: 1.8; margin-bottom: 9px; color: var(--b29-sub); }
.vc-col li::before { content: "!"; position: absolute; left: 3px; top: 0; color: var(--b29-danger); font-weight: 800; }
.vc-note-list { list-style: none; margin: 0; padding: 0; }
.vc-note-list li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; padding: 7px 0;
    border-bottom: 1px dashed var(--b29-line); font-size: var(--b29-sm); }
.vc-note-list li:last-child { border-bottom: 0; }
.vc-note-list b { color: var(--b29-muted); font-size: var(--b29-xs); font-weight: 700; }

.vc-ai-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 22px; border: 2px dashed var(--b29-accent); border-radius: var(--b29-radius); background: var(--b29-tint); }
.vc-ai-box b { font-size: var(--b29-md); }
.vc-ai-box p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.75; margin: 6px 0 0; max-width: 700px; }

@media (max-width: 900px) { .vc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .vc-console-head, .vc-cards, .vc-params { padding-left: 16px; padding-right: 16px; }
    .vc-cards { grid-template-columns: minmax(0, 1fr); }
    .vc-note-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}