:root {
    color-scheme: dark;
    --bmh-bg: #0b1020;
    --bmh-card: #151c31;
    --bmh-card-2: #1b2540;
    --bmh-text: #f7f9ff;
    --bmh-muted: #aeb8d0;
    --bmh-accent: #75e6a5;
    --bmh-warm: #ffb454;
    --bmh-cold: #7dc8ff;
    --bmh-danger: #ff8c8c;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bmh-bg); }
body.bmh-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--bmh-text); background: radial-gradient(circle at top, rgba(117,230,165,.13), transparent 35%), var(--bmh-bg); }
.bmh-app { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
.bmh-card { width: min(100%, 560px); background: linear-gradient(180deg, var(--bmh-card-2), var(--bmh-card)); border: 1px solid rgba(255,255,255,.08); border-radius: 28px; padding: 30px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.34); text-align: center; }
.bmh-kicker { color: var(--bmh-accent); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.bmh-card h1, .bmh-card h2 { margin: 10px 0 12px; line-height: 1.05; }
.bmh-card h1 { font-size: clamp(30px, 8vw, 48px); }
.bmh-card h2 { font-size: 36px; }
.bmh-intro, .bmh-success-message, .bmh-checkpoint-message { color: var(--bmh-muted); font-size: 17px; line-height: 1.55; }
.bmh-route-badge { display:inline-block; margin:8px 0 2px; padding:7px 11px; border-radius:999px; background:rgba(117,230,165,.11); color:var(--bmh-accent); font-size:13px; font-weight:800; }
.bmh-primary { appearance: none; border: 0; border-radius: 16px; padding: 16px 22px; margin-top: 18px; width: 100%; font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; background: var(--bmh-accent); color: #07130d; }
.bmh-primary:disabled { opacity:.55; cursor:wait; }
.bmh-live { margin-top: 28px; }
.bmh-progress { margin-bottom:9px; color:var(--bmh-accent); font-size:13px; font-weight:800; }
.bmh-label { color: var(--bmh-muted); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.bmh-distance { font-weight: 900; font-size: clamp(56px, 17vw, 92px); line-height: 1; margin: 10px 0 14px; letter-spacing: -.04em; }
.bmh-trend { font-size: 18px; font-weight: 800; min-height: 28px; }
.bmh-trend.is-warmer { color: var(--bmh-warm); }
.bmh-trend.is-colder { color: var(--bmh-cold); }
.bmh-trend.is-neutral { color: var(--bmh-muted); }
.bmh-meter { width: 100%; height: 10px; margin: 24px 0; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bmh-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--bmh-accent); transition: width .4s ease; }
.bmh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bmh-stats div { background: rgba(255,255,255,.05); border-radius: 16px; padding: 14px; }
.bmh-stats span, .bmh-stats strong { display: block; }
.bmh-stats span { color: var(--bmh-muted); font-size: 12px; margin-bottom: 5px; }
.bmh-stats strong { font-size: 15px; }
.bmh-tip { color: var(--bmh-muted); font-size: 14px; line-height: 1.45; margin: 18px 4px 0; }
.bmh-alert { margin-top: 18px; padding: 14px 16px; border-radius: 14px; color: #2b0909; background: var(--bmh-danger); font-weight: 650; text-align: left; }
.bmh-success, .bmh-checkpoint { animation: bmh-in .35s ease both; }
.bmh-success-icon { width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--bmh-accent); color: #07130d; font-size: 48px; font-weight: 900; }
.bmh-waypoint-icon { width:70px; height:70px; font-size:38px; }
.bmh-question { margin:24px 0 14px; font-size:20px; line-height:1.4; font-weight:800; text-align:left; }
#bmh-answer-input { display:grid; gap:10px; }
.bmh-text-answer { width:100%; padding:15px 16px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.06); color:var(--bmh-text); font:inherit; font-size:17px; outline:none; }
.bmh-text-answer:focus { border-color:var(--bmh-accent); box-shadow:0 0 0 3px rgba(117,230,165,.12); }
.bmh-choice { display:flex; gap:12px; align-items:center; padding:14px 15px; border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(255,255,255,.05); cursor:pointer; text-align:left; }
.bmh-choice input { width:20px; height:20px; flex:0 0 auto; accent-color:var(--bmh-accent); }
.bmh-choice span { font-weight:700; }
.bmh-answer-feedback { margin-top:14px; padding:13px 14px; border-radius:13px; font-weight:750; text-align:left; }
.bmh-answer-feedback.is-correct { color:#07130d; background:var(--bmh-accent); }
.bmh-answer-feedback.is-error { color:#2b0909; background:var(--bmh-danger); }
@keyframes bmh-in { from { opacity: 0; transform: translateY(15px) scale(.98); } to { opacity: 1; transform: none; } }
[hidden] { display: none !important; }
@media (max-width: 420px) { .bmh-card { padding: 26px 18px; border-radius: 22px; } .bmh-stats { grid-template-columns: 1fr; } }