.risk-meter { height:24px; border-radius:12px; background:linear-gradient(90deg,#28a745 0%,#ffc107 40%,#fd7e14 70%,#dc3545 100%); position:relative; margin:1rem 0; overflow:hidden; }.form-label {font-size:0.9rem
}
        .risk-meter-fill { height:100%; border-radius:12px; background:rgba(255,255,255,0.3); transition:width 0.8s ease; width:0%; }
        .risk-meter-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:0.75rem; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.5); pointer-events:none; white-space:nowrap; }
        .risk-badge { font-size:1rem; padding:0.35rem 1.2rem; border-radius:20px; font-weight:600; }
        .risk-badge.low { background:#d4edda; color:#155724; }
        .risk-badge.moderate { background:#fff3cd; color:#856404; }
        .risk-badge.high { background:#f8d7da; color:#721c24; }
        .risk-badge.very-high { background:#dc3545; color:#fff; }
        .result-card { padding:1.5rem; border-radius:12px; background:#f8f9fa; border-left:5px solid var(--primary-color); margin:1rem 0; }
        .result-card .number { font-size:2.8rem; font-weight:700; color:var(--primary-color); line-height:1.2; }
        .result-card .unit { font-size:1rem; color:#6c757d; font-weight:400; }
        .gauge-container { position:relative; width:100%; max-width:360px; margin:0 auto; }
        .factor-badge { display:inline-block; padding:0.2rem 0.7rem; border-radius:12px; font-size:0.8rem; font-weight:500; margin:0.2rem 0.2rem; }
        .factor-badge.controlled { background:#d4edda; color:#155724; }
        .factor-badge.warning { background:#fff3cd; color:#856404; }
        .factor-badge.danger { background:#f8d7da; color:#721c24; }
        .health-tip { background:#e8f4fd; border-radius:8px; padding:1rem 1.2rem; border-left:4px solid #0d6efd; margin:0.8rem 0; }
        .health-tip.warning-tip { border-left-color:#fd7e14; background:#fff8ee; }
        .health-tip.danger-tip { border-left-color:#dc3545; background:#fde8e8; }
        .health-tip.success-tip { border-left-color:#28a745; background:#e8f5ed; }
        .risk-factor-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:0.8rem; margin:1rem 0; }
        .risk-factor-item { background:#fff; border-radius:8px; padding:0.8rem 1rem; border:1px solid #e9ecef; text-align:center; }
        .risk-factor-item .label { font-size:0.75rem; color:#6c757d; text-transform:uppercase; letter-spacing:0.5px; }
        .risk-factor-item .value { font-size:1.3rem; font-weight:600; color:#212529; }
        .risk-factor-item .status { font-size:0.75rem; }
        .accordion-button:not(.collapsed) { background:rgba(70,130,180,0.05); color:var(--primary-color); }
        .accordion-button:focus { box-shadow:none; border-color:rgba(70,130,180,0.25); }
        .disclaimer-box { background:#f8f9fa; border:1px solid #dee2e6; border-radius:8px; padding:1rem; font-size:0.85rem; color:#6c757d; margin:1.5rem 0; }
        .medically-reviewed { background:#f0f7fa; border-radius:12px; padding:1.2rem; border:1px solid #b8daff; margin:1.5rem 0; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
        .medically-reviewed img { width:60px; height:60px; border-radius:50%; object-fit:cover; background:#ddd; }
        .medically-reviewed .credentials { font-size:0.9rem; }
        .medically-reviewed .credentials strong { display:block; font-size:1.1rem; }
        .reference-list { column-count:2; column-gap:2rem; font-size:0.85rem; }
        .reference-list li { margin-bottom:0.4rem; break-inside:avoid; }
        @media (max-width:768px) { .reference-list { column-count:1; } }
        .canvas-container { text-align:center; margin-top:1rem; }
        .gender-selector { display:flex; gap:0.5rem; }
        .gender-selector .btn { flex:1; border-radius:8px; }
        .gender-selector .btn.active-gender { border-color:var(--primary-color); background:rgba(70,130,180,0.1); }
        .unit-toggle { font-size:0.8rem; cursor:pointer; color:var(--primary-color); text-decoration:underline dotted; }
        .race-selector { display:flex; gap:0.5rem; flex-wrap:wrap; }
        .race-selector .btn { flex:1; min-width:100px; border-radius:8px; }
        .race-selector .btn.active-race { border-color:var(--primary-color); background:rgba(70,130,180,0.1); }