/* ======================================================================
 *  排便异常自查 · 独立设计「肠道信号站」
 *  配色：青柠绿（健康、生机）为主，珊瑚红（危险信号）、琥珀（便秘倾向）
 * ====================================================================== */

.bhc {
    --bg: #f2faf4;
    --bg2: #e8f7ec;
    --card: #ffffff;
    --card2: #f4fbf6;
    --ink: #12221a;
    --sub: #3d5649;
    --faint: #7a9084;
    --line: #d9ebde;
    --line2: #e8f5ec;
    --lime: #2f9e44;
    --lime-2: #51cf66;
    --lime-soft: #d3f9d8;
    --lime-ink: #2b8a3e;
    --amber: #e8890c;
    --coral: #e03131;
    --coral-soft: #ffe3e3;
    --shadow-sm: 0 1px 2px rgba(18, 34, 26, .04), 0 6px 16px rgba(18, 34, 26, .04);
    --shadow: 0 2px 6px rgba(18, 34, 26, .06), 0 20px 46px rgba(18, 34, 26, .08);
    --r: 20px;
    --r-sm: 13px;
}

:root[data-theme="dark"] .bhc {
    --bg: #0a160f;
    --bg2: #0f2116;
    --card: #14281e;
    --card2: #1a3326;
    --ink: #e6f6ec;
    --sub: #9fbeac;
    --faint: #688a76;
    --line: #1e4030;
    --line2: #183526;
    --lime: #69db7c;
    --lime-soft: rgba(105, 219, 124, .14);
    --lime-ink: #8ce99a;
    --amber: #ffd43b;
    --coral: #ff8787;
    --coral-soft: rgba(255, 135, 135, .14);
}

.bhc {
    background:
        radial-gradient(760px 340px at 92% -6%, rgba(47, 158, 68, .12), transparent 60%),
        radial-gradient(620px 320px at 2% 8%, rgba(81, 207, 102, .08), transparent 58%),
        var(--bg);
}

.bhc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 30px;
    align-items: center;
    padding: 30px 0 24px;
}
.bhc-hero-l .tsk-h1 { margin-top: 15px; }
.bhc-hero-l .tsk-h1 em { color: var(--lime-ink); }

.bhc-result-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 26px 24px;
    text-align: center;
}
.bhc-result-emoji {
    font-size: 54px;
    line-height: 1;
    margin-bottom: 10px;
}
.bhc-result-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.6;
}
.bhc-redflag-count {
    margin-top: 10px;
    font-size: 12px;
    color: var(--coral);
    font-weight: 700;
}

/* Bristol */
.bhc-bristol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.bhc-bristol-type {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: center;
    transition: .15s;
    text-align: left;
}
.bhc-bristol-type:hover { border-color: var(--lime); }
.bhc-bristol-type.on {
    border-color: var(--lime);
    background: var(--lime-soft);
    box-shadow: 0 4px 14px rgba(47, 158, 68, .2);
}
.bhc-bristol-shape {
    width: 80px;
    height: 64px;
    flex: none;
}
.bhc-bristol-t { flex: 1; }
.bhc-bristol-num {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    color: var(--lime-ink);
    background: var(--lime-soft);
    padding: 2px 8px;
    border-radius: 99px;
    margin-right: 4px;
}
.bhc-bristol-type.on .bhc-bristol-num {
    background: var(--lime);
    color: #fff;
}
.bhc-bristol-t b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 4px;
}
.bhc-bristol-t i {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--faint);
    margin-top: 2px;
    line-height: 1.5;
}
.bhc-bristol-t small {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sub);
    margin-top: 3px;
}

/* Frequency */
.bhc-freq {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 24px 28px;
}
.bhc-freq-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, #ff6b6b 0 10%, #ffd43b 10% 15%, #51cf66 15% 70%, #ffd43b 70% 80%, #ff6b6b 80% 100%);
    outline: none;
}
.bhc-freq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--card);
    border: 5px solid var(--lime);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.bhc-freq-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.bhc-freq-display b {
    font: 800 42px/1 var(--num, "Bahnschrift", monospace);
    color: var(--lime-ink);
    font-variant-numeric: tabular-nums;
}
.bhc-freq-display span { font-size: 14px; color: var(--faint); font-weight: 600; }
.bhc-freq-display em {
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 99px;
    background: var(--lime-soft);
    color: var(--lime-ink);
}
.bhc-freq-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: var(--faint);
    margin-top: 10px;
    font-weight: 600;
}

/* Flags */
.bhc-flags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
}
.bhc-flag {
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: .15s;
    text-align: left;
}
.bhc-flag:hover { border-color: var(--coral); }
.bhc-flag.on {
    background: var(--coral-soft);
    border-color: var(--coral);
}
.bhc-flag-box {
    width: 18px; height: 18px;
    border-radius: 6px;
    border: 1.5px solid var(--line);
    background: var(--card);
    flex: none;
    margin-top: 2px;
    position: relative;
}
.bhc-flag.on .bhc-flag-box {
    background: var(--coral);
    border-color: var(--coral);
}
.bhc-flag.on .bhc-flag-box::after {
    content: "";
    position: absolute; left: 5px; top: 1px;
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(42deg);
}
.bhc-flag-info { flex: 1; }
.bhc-flag-info b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}
.bhc-flag-info i {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--faint);
    margin-top: 2px;
    line-height: 1.5;
}
.bhc-flag-sev { font-size: 12px; }

/* Seek medical */
.bhc-seek {
    display: grid;
    gap: 10px;
}
.bhc-seek-card {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}
.bhc-seek-card span {
    color: var(--coral);
    font-weight: 700;
    flex: none;
}
.bhc-seek-card p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink);
    margin: 0;
}

/* Departments */
.bhc-depts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.bhc-dept {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
}
.bhc-dept b {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--lime-ink);
}
.bhc-dept-when {
    display: block;
    font-size: 12px;
    color: var(--sub);
    margin-top: 4px;
    font-weight: 600;
}
.bhc-dept i {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--faint);
    margin-top: 8px;
    line-height: 1.6;
}

/* Tests */
.bhc-tests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.bhc-test {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--lime);
}
.bhc-test b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}
.bhc-test p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--sub);
    margin: 0;
}
.bhc-test small {
    display: block;
    font-size: 10.5px;
    color: var(--faint);
    margin-top: 8px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .bhc-hero { grid-template-columns: 1fr; }
}