/* 29 · 燃气泄漏自查 —— 视觉母题「应急指挥台」
   独立布局：左深色现场勾选台 + 右四步轨道；结果用红/橙/绿三色分级带与双栏禁止动作。
   与其余 18 页的色板、栅格、结果呈现均不同。 */
.b29.gl-wrap {
    --b29-bg: #f7f3ee;
    --b29-surface: #fffdfa;
    --b29-surface-2: #f8f3ec;
    --b29-ink: #21252b;
    --b29-sub: #555b64;
    --b29-muted: #8b8d90;
    --b29-line: #e7dfd4;
    --b29-line-strong: #d7cdbe;
    --b29-accent: #b23b2c;
    --b29-accent-2: #c47b23;
    --b29-tint: #fbe9e4;
    --b29-radius: 14px;
    --b29-radius-sm: 8px;
    --gl-dark: #20262c;
    --gl-dark-2: #2b333b;
    --gl-dark-line: #414a54;
}
:root[data-theme="dark"] .b29.gl-wrap {
    --b29-bg: #0f1216;
    --b29-surface: #1a1f25;
    --b29-surface-2: #22282f;
    --b29-ink: #eef1f4;
    --b29-sub: #b9c0c8;
    --b29-muted: #8c959f;
    --b29-line: #2d343c;
    --b29-line-strong: #3b444e;
    --b29-accent: #f0806e;
    --b29-accent-2: #e8b168;
    --b29-tint: #35221f;
    --gl-dark: #161b21;
    --gl-dark-2: #20272f;
    --gl-dark-line: #3a434d;
}
.gl-hero h1 em { font-style: normal; color: var(--b29-accent); }
.gl-hero { border-bottom: 1px solid var(--b29-line-strong); }

/* 首屏指挥台：左深右浅，非对称双栏 */
.gl-console { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 0; margin-top: 6px;
    border-radius: var(--b29-radius); overflow: hidden; box-shadow: var(--b29-shadow); border: 1px solid var(--b29-line); }
.gl-console-main { background: var(--gl-dark); color: #f3f5f7; padding: 30px 30px 26px; }
.gl-console-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .18em; color: #e89a86; margin-bottom: 14px; }
.gl-console-main h2 { font-size: var(--b29-xl); color: #fff; margin-bottom: 8px; }
.gl-console-sub { font-size: var(--b29-sm); color: #b8c0c8; line-height: 1.75; margin-bottom: 20px; }
.gl-console-sub b { color: #ff9f8b; }
.gl-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gl-sign { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 12px 13px;
    border: 1.5px solid var(--gl-dark-line); border-radius: 9px; background: var(--gl-dark-2); font-size: var(--b29-sm); line-height: 1.55; transition: all .16s; }
.gl-sign:hover { border-color: #a9b4bf; }
.gl-sign input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gl-sign input:checked + .gl-sign-txt { color: #fff; font-weight: 750; }
.gl-sign:has(input:checked) { border-color: #e0775f; background: #3a2a29; }
.gl-sign-txt { color: #d2d8de; }
.gl-sign-txt small { display: block; color: #9aa4ae; font-size: var(--b29-xs); font-weight: 400; margin-top: 2px; }
.gl-sign--red .gl-sign-txt::before { content: "●"; color: #f0735c; margin-right: 6px; font-size: 10px; }
.gl-sign input:focus-visible + .gl-sign-txt { outline: 2px solid #f0735c; outline-offset: 3px; }
.gl-console-main .b29-btn--soft { background: var(--gl-dark-2); color: #e6ebef; border-color: var(--gl-dark-line); }
.gl-console-main .b29-btn--ghost { color: #f0a08d; border-color: #8a5a50; }
.gl-btn-go { background: #c8492f; border-color: #c8492f; }
.gl-console-main .b29-err { color: #ff9f8b; }

.gl-console-side { background: var(--b29-surface); padding: 30px 24px; border-left: 1px solid var(--b29-line); }
.gl-side-title { font-size: var(--b29-sm); font-weight: 800; letter-spacing: .12em; color: var(--b29-accent); margin-bottom: 20px; }
.gl-steps-mini { list-style: none; margin: 0; padding: 0; }
.gl-steps-mini li { display: flex; gap: 13px; align-items: flex-start; padding: 0 0 18px; margin: 0; position: relative; }
.gl-steps-mini li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 2px; width: 2px; background: var(--b29-line-strong); }
.gl-steps-mini li > span { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--b29-tint); color: var(--b29-accent); font-family: var(--b29-mono); font-size: 12px; font-weight: 800; }
.gl-steps-mini b { display: block; font-size: var(--b29-base); }
.gl-steps-mini small { display: block; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.65; margin-top: 2px; }
.gl-side-foot { padding-top: 14px; border-top: 1px dashed var(--b29-line-strong); font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.7; }

/* 分级结果：横幅 + 进度刻度 */
.gl-level { border-radius: var(--b29-radius); padding: 22px 24px; margin-bottom: 20px; border: 1.5px solid; }
.gl-level--3 { background: var(--b29-danger-tint); border-color: var(--b29-danger); }
.gl-level--2 { background: var(--b29-warn-tint); border-color: var(--b29-warn); }
.gl-level--1 { background: var(--b29-ok-tint); border-color: var(--b29-ok); }
.gl-level-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.gl-level-no { font-family: var(--b29-mono); font-size: 13px; font-weight: 800; letter-spacing: .1em; opacity: .8; }
.gl-level h3 { font-size: var(--b29-xl); }
.gl-level p { font-size: var(--b29-sm); line-height: 1.8; margin: 0; }
.gl-scale { display: flex; gap: 6px; margin-top: 16px; }
.gl-scale i { flex: 1; height: 7px; border-radius: 4px; background: var(--b29-line-strong); }
.gl-scale i.on { background: var(--b29-danger); }
.gl-level--2 .gl-scale i.on { background: var(--b29-warn); }
.gl-level--1 .gl-scale i.on { background: var(--b29-ok); }

.gl-do-grid { margin-top: 20px; }
.gl-do { border-radius: var(--b29-radius); border: 1px solid var(--b29-line); background: var(--b29-surface); padding: 22px 24px; }
.gl-do h3 { font-size: var(--b29-md); margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.gl-do h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.gl-do--yes { border-top: 4px solid var(--b29-ok); }
.gl-do--yes h3 { color: var(--b29-ok); }
.gl-do--no { border-top: 4px solid var(--b29-danger); }
.gl-do--no h3 { color: var(--b29-danger); }
.gl-do ul { list-style: none; padding: 0; margin: 0; }
.gl-do li { position: relative; padding-left: 22px; font-size: var(--b29-sm); line-height: 1.85; margin-bottom: 9px; color: var(--b29-sub); }
.gl-do li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--b29-ok); }
.gl-do--no li::before { content: "×"; color: var(--b29-danger); }
.gl-do b { color: var(--b29-ink); }

@media (max-width: 900px) {
    .gl-console { grid-template-columns: minmax(0, 1fr); }
    .gl-console-side { border-left: 0; border-top: 1px solid var(--b29-line); }
    .gl-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .gl-console-main, .gl-console-side { padding: 20px 17px; }
    .gl-signs { grid-template-columns: minmax(0, 1fr); }
    .gl-level h3 { font-size: var(--b29-lg); }
}