/* 42 · 仓鼠饲养指南 —— 视觉母题「笼具俯视平面 / 垫料网格」
   独立布局：左侧随输入变化的笼具俯视图 + 右侧实测参数；结果用彩色状态行（通过 / 待改进 / 必须改）。 */
.b29.hc-wrap {
    --b29-bg: #faf6ef;
    --b29-surface: #fffdf8;
    --b29-surface-2: #f6eee0;
    --b29-ink: #30281d;
    --b29-sub: #645646;
    --b29-muted: #9a8b76;
    --b29-line: #ecdfc9;
    --b29-line-strong: #dac4a2;
    --b29-accent: #a1723f;
    --b29-accent-2: #6b8455;
    --b29-tint: #f7ebd7;
    --b29-radius: 17px;
    --b29-radius-sm: 10px;
}
:root[data-theme="dark"] .b29.hc-wrap {
    --b29-bg: #16120d;
    --b29-surface: #221c13;
    --b29-surface-2: #2c2417;
    --b29-ink: #f4e9d6;
    --b29-sub: #cdbb9c;
    --b29-muted: #9f9077;
    --b29-line: #3b3020;
    --b29-line-strong: #51422b;
    --b29-accent: #e0b276;
    --b29-accent-2: #a9c68a;
    --b29-tint: #3a2c17;
}
.hc-hero h1 em { font-style: normal; color: var(--b29-accent); display: block; font-size: .57em; margin-top: 10px; }
.hc-console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); }
.hc-plan { padding: 26px; background: var(--b29-surface-2); }
.hc-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--b29-accent); margin-bottom: 11px; }
.hc-plan h2 { font-size: var(--b29-xl); margin-bottom: 16px; }
.hc-cage { position: relative; height: 250px; border: 8px solid var(--b29-accent); border-radius: 10px;
    background: repeating-linear-gradient(0deg, var(--b29-surface) 0 22px, var(--b29-line) 22px 23px);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); transition: height .25s; }
.hc-bedding { position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
    background: repeating-linear-gradient(45deg, #e8d3aa 0 8px, #dfc69a 8px 16px); opacity: .8;
    border-top: 2px dashed #c9a973; display: grid; place-items: center; }
.hc-bedding span, .hc-wheel span, .hc-house span, .hc-bottle span { font-size: var(--b29-xs); color: #5b472d; font-weight: 800; background: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 4px; }
.hc-wheel { position: absolute; right: 7%; bottom: 10%; width: 74px; height: 74px; border-radius: 50%;
    border: 7px solid var(--b29-accent-2); background: var(--b29-surface); display: grid; place-items: center; }
.hc-house { position: absolute; left: 9%; bottom: 12%; width: 88px; height: 58px; border-radius: 8px 8px 3px 3px;
    background: #c58f5e; border: 2px solid #a27146; display: grid; place-items: center; }
.hc-bottle { position: absolute; left: 4%; top: 8%; width: 30px; height: 62px; border-radius: 6px 6px 12px 12px;
    background: #bcd8df; border: 2px solid #7fa9b4; display: grid; place-items: center; }
.hc-bottle span { background: none; font-size: 10px; }
.hc-gap { position: absolute; right: -9px; top: -30px; font-size: var(--b29-xs); color: var(--b29-danger); font-weight: 750; white-space: nowrap; }
.hc-plan-meta { margin-top: 34px; font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.8; }
.hc-plan-meta b { color: var(--b29-accent); font-size: var(--b29-md); }
.hc-side { padding: 26px 24px; background: var(--b29-surface); border-left: 1px solid var(--b29-line); display: flex; flex-direction: column; gap: 12px; }
.hc-side-title { font-size: var(--b29-sm); font-weight: 800; letter-spacing: .1em; color: var(--b29-accent); }

.hc-verdict { padding: 18px 21px; border-radius: var(--b29-radius); background: var(--b29-tint);
    border-left: 5px solid var(--b29-accent); font-size: var(--b29-sm); line-height: 1.85; margin-bottom: 18px; }
.hc-verdict b { color: var(--b29-accent); }
.hc-checks { display: flex; flex-direction: column; gap: 9px; }
.hc-check { display: grid; grid-template-columns: 92px minmax(0, 1fr) 96px; gap: 14px; align-items: center;
    padding: 14px 17px; border-radius: var(--b29-radius-sm); border: 1px solid var(--b29-line); background: var(--b29-surface); }
.hc-check-name { font-size: var(--b29-sm); font-weight: 800; }
.hc-check p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.7; margin: 0; }
.hc-check .b29-badge { text-align: center; }
.hc-check.is-bad { border-left: 4px solid var(--b29-danger); }
.hc-check.is-warn { border-left: 4px solid var(--b29-warn); }
.hc-check.is-good { border-left: 4px solid var(--b29-ok); }

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

@media (max-width: 900px) {
    .hc-console { grid-template-columns: minmax(0, 1fr); }
    .hc-side { border-left: 0; border-top: 1px solid var(--b29-line); }
    .hc-escape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-check { grid-template-columns: 84px minmax(0, 1fr); }
    .hc-check .b29-badge { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
    .hc-plan, .hc-side { padding: 18px 16px; }
    .hc-escape { grid-template-columns: minmax(0, 1fr); }
}