/* 43 · 车灯灯泡型号查询 —— 视觉母题「加油机式灯位面板 / 规格卡矩阵」
   独立布局：左侧三个大灯位按钮（灯泡光晕）+ 右侧标识输入；结果用带型号大字与参数表的规格卡。 */
.b29.hb-wrap {
    --b29-bg: #f4f5f7;
    --b29-surface: #ffffff;
    --b29-surface-2: #f1f3f6;
    --b29-ink: #222831;
    --b29-sub: #525b68;
    --b29-muted: #8b939f;
    --b29-line: #e2e6ec;
    --b29-line-strong: #cdd4de;
    --b29-accent: #3d4d66;
    --b29-accent-2: #d9a423;
    --b29-tint: #eef1f6;
    --b29-radius: 13px;
    --b29-radius-sm: 8px;
}
:root[data-theme="dark"] .b29.hb-wrap {
    --b29-bg: #101318;
    --b29-surface: #1a1f27;
    --b29-surface-2: #222833;
    --b29-ink: #edf1f6;
    --b29-sub: #b8c0cc;
    --b29-muted: #8a94a3;
    --b29-line: #2d3542;
    --b29-line-strong: #3d4757;
    --b29-accent: #9eb4d6;
    --b29-accent-2: #f0ca62;
    --b29-tint: #232c3a;
}
.hb-hero h1 em { font-style: normal; color: var(--b29-accent-2); display: block; font-size: .56em; margin-top: 10px; }
.hb-console { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0;
    border: 1px solid var(--b29-line); border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); }
.hb-lamps { padding: 26px; background: #222932; }
:root[data-theme="dark"] .hb-lamps { background: #151a21; }
.hb-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .16em; color: #e9c46a; margin-bottom: 11px; }
.hb-lamps h2 { font-size: var(--b29-xl); color: #fff; margin-bottom: 20px; }
.hb-lamp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hb-lamp { position: relative; cursor: pointer; text-align: center; padding: 20px 10px 16px; border-radius: 10px;
    background: #2d3540; border: 2px solid #414b59; color: #cfd6df; transition: all .16s; }
.hb-lamp:hover { border-color: #e9c46a; }
.hb-lamp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hb-lamp:has(input:checked) { border-color: #e9c46a; background: #3b3a2c; }
.hb-lamp i { display: block; width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff8d8, #e9c46a 55%, #9c7c25); box-shadow: 0 0 20px rgba(233,196,106,.35); }
.hb-lamp:has(input:checked) i { box-shadow: 0 0 30px rgba(255,220,120,.85); }
.hb-lamp b { display: block; font-size: var(--b29-base); color: #fff; }
.hb-lamp small { display: block; font-size: var(--b29-xs); color: #9fa9b6; margin-top: 4px; line-height: 1.6; }
.hb-lamp input:focus-visible ~ b { outline: 2px solid #e9c46a; outline-offset: 3px; }
.hb-note-line { margin-top: 18px; font-size: var(--b29-xs); color: #a6b0bd; line-height: 1.8; }
.hb-note-line b { color: #e9c46a; }
.hb-side { padding: 26px 24px; background: var(--b29-surface); border-left: 1px solid var(--b29-line); display: flex; flex-direction: column; gap: 13px; }
.hb-side-title { font-size: var(--b29-sm); font-weight: 800; letter-spacing: .1em; color: var(--b29-accent); }

.hb-verdict { padding: 17px 20px; 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: 20px; }
.hb-verdict b { color: var(--b29-accent); }
.hb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hb-card { padding: 18px 17px; border-radius: var(--b29-radius-sm); background: var(--b29-surface);
    border: 1px solid var(--b29-line); border-top: 4px solid var(--b29-line-strong); }
.hb-card.is-top { border-top-color: var(--b29-accent-2); box-shadow: var(--b29-shadow-lift); }
.hb-card-no { font-family: var(--b29-mono); font-size: var(--b29-xl); font-weight: 800; letter-spacing: -.03em; color: var(--b29-accent); }
.hb-card.is-top .hb-card-no { color: var(--b29-accent-2); }
.hb-card dl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 5px 8px; font-size: var(--b29-xs); margin: 12px 0 0; line-height: 1.65; }
.hb-card dt { color: var(--b29-muted); }
.hb-card dd { margin: 0; color: var(--b29-sub); }
.hb-card .hb-mix { display: block; margin-top: 10px; font-size: var(--b29-xs); color: var(--b29-danger); line-height: 1.65; }
.hb-card .hb-match { display: inline-block; margin-top: 10px; font-size: var(--b29-xs); font-weight: 800;
    padding: 2px 9px; border-radius: 999px; background: var(--b29-tint); color: var(--b29-accent); }

@media (max-width: 900px) {
    .hb-console { grid-template-columns: minmax(0, 1fr); }
    .hb-side { border-left: 0; border-top: 1px solid var(--b29-line); }
    .hb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .hb-lamps, .hb-side { padding: 18px 16px; }
    .hb-lamp-grid { grid-template-columns: minmax(0, 1fr); }
    .hb-cards { grid-template-columns: minmax(0, 1fr); }
}