:root{
  --brand:#05CAAD;
  --brand-600:#04b39a;
  --brand-700:#039b86;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --outline:#e5e7eb;
}
.framingham-wrap *{box-sizing:border-box}
.fr-head h1{font-size:1.4rem; letter-spacing:.2px; margin:0}
.fr-head p{opacity:.95; margin-top:6px}
.card{border:1px solid var(--outline); border-radius:12px; background:#fff; padding:16px; margin:20px 0; box-shadow:0 1px 2px rgba(2,6,23,.04)}
.card h2{font-size:1.15rem; margin-bottom:12px}
label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px}
input[type="number"]{width:100%; border:1px solid var(--outline); border-radius:10px; font-size:1rem; background:#fff; color:var(--ink); padding:10px 12px; margin-bottom:8px}
input[type="number"]:focus{outline:2px solid #a7f3d0; border-color:#99f6e4}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:12px}
@media (max-width:640px){ .row{grid-template-columns:1fr} }
.seg{display:inline-flex; border:1px solid var(--outline); border-radius:999px; overflow:hidden}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{padding:8px 14px; cursor:pointer; font-size:.9rem}
.seg input:checked + span{ background:var(--brand); color:#fff }
.btnbar{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.btn{border:0; cursor:pointer; font-weight:600; font-size:1rem; color:#fff; background:var(--brand); border-radius:10px; padding:10px 16px}
.btn:hover{ background:var(--brand-600) }
.btn:active{ background:var(--brand-700) }
.result{border:1px dashed var(--outline); background:#f8fffd; border-radius:12px; padding:16px}
.big{font-size:1.9rem; font-weight:800}
.badge{font-weight:700; padding:4px 10px; border-radius:999px; color:#fff; font-size:.85rem}
.b-low{background:#16a34a} .b-mod{background:#f59e0b} .b-high{background:#ef4444} .b-vhigh{background:#7c3aed}
.hint{font-size:.82rem; color:var(--muted); margin-top:-2px; margin-bottom:8px}
.ovr-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:640px){ .ovr-grid{grid-template-columns:1fr} }
.ovr-item{display:flex; align-items:flex-start; gap:8px; background:#fafafa; border:1px solid var(--outline); border-radius:10px; padding:8px 10px}
.ovr-item input{margin-top:2px}
.kpi{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:12px}
@media (max-width:640px){ .kpi{grid-template-columns:1fr} }
.tile{border:1px solid var(--outline); border-radius:10px; background:#fff; padding:12px}
.tile .label{font-size:.9rem; color:var(--muted)}
.tile .value{font-size:1.4rem; font-weight:800}
.points{margin-top:12px; border-top:1px solid var(--outline); padding-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px}
@media (max-width:640px){ .points{grid-template-columns:1fr} }
.points div{display:flex; justify-content:space-between; border:1px solid var(--outline); border-radius:8px; padding:8px 10px; background:#fff}
.points .total-highlight{grid-column:1 / -1; border:1px solid var(--brand); background:#f0fffc; box-shadow:0 1px 2px rgba(2,6,23,.04); font-weight:700}
.points .total-highlight span{color:var(--muted)}
.fr-foot{font-size:.85rem; color:var(--muted)}

/* Collapsible boxes */
.guide-section{margin:20px 0}
.ref-accordion{border:1px solid #05CAAD;border-radius:10px;overflow:hidden;margin-bottom:12px;background:#fff; box-shadow:0 1px 3px rgba(2,6,23,.06)}
.ref-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;background:linear-gradient(180deg,#05CAAD,#04b39a);color:#fff;padding:12px 14px}
.ref-toggle .title{font-weight:700;font-size:1rem;letter-spacing:.2px}
.ref-toggle .icon{font-weight:800;font-size:18px;line-height:1;user-select:none;transition:transform .2s ease}
.ref-content{background:#f8fffd;border-top:1px solid #05CAAD;max-height:0;overflow:hidden;padding:0 14px;transition:max-height .3s ease,padding .3s ease}
.ref-accordion.open .ref-content{max-height:1000px;padding:12px 14px}
.ref-accordion.open .ref-toggle .icon{transform:rotate(90deg)}
.ref-content ol, .ref-content ul{margin-left:18px}
.ref-content li, .ref-content p{margin:6px 0}

/* Enhancers */
.enhancer-panel{margin-top:12px; border:1px solid var(--brand); background:#ffffff; border-radius:10px; padding:12px}
.enhancer-panel h3{font-size:1rem; margin:0 0 8px; color:var(--ink)}
.enh-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:640px){ .enh-grid{grid-template-columns:1fr} }
.enh-item{display:flex; gap:8px; align-items:flex-start; background:#f8fffd; border:1px solid var(--outline); border-radius:8px; padding:8px 10px}

/* Visual flags near inputs */
.flag{font-size:.85rem; color:#b91c1c; background:#fff1f2; border:1px solid #fecaca; border-radius:8px; padding:6px 8px}