:root{--red:#d0091e;--blue:#0a73bf;--navy:#00155c;--pale:#cfe8f3;--bg:#f6fbfe;--ok:#1b7f4b}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--navy);background:var(--bg)}
header{display:flex;gap:1rem;align-items:center;padding:1rem 1.5rem;background:var(--pale);border-bottom:3px solid var(--blue)}
header h1{margin:0;font-size:1.7rem}header p{margin:0}
main{max-width:46rem;margin:0 auto;padding:1.5rem}
fieldset{border:2px solid var(--pale);border-radius:1rem;background:#fff;margin:0 0 1rem;padding:1rem 1.25rem}
legend{font-weight:700;padding:0 .5rem}
.grid,.times{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem}
label{display:flex;flex-direction:column;gap:.25rem;font-weight:600;font-size:.9rem}
select,input{font:inherit;padding:.45rem .6rem;border:2px solid var(--pale);border-radius:.6rem;color:var(--navy);background:#fff}
select:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
button{font:inherit;font-weight:700;color:#fff;background:var(--blue);border:0;border-radius:2rem;padding:.7rem 1.6rem;cursor:pointer}
button:hover:not(:disabled){background:var(--navy)}button:disabled{opacity:.5;cursor:not-allowed}
.muted{color:#4a5f8a;font-weight:400;font-size:.9rem}
.error{background:#fdecee;border:2px solid var(--red);border-radius:.8rem;padding:.7rem 1rem;color:#7a0010}
.notice{background:#fff7e0;border:2px solid #e0b100;border-radius:.8rem;padding:.7rem 1rem;margin-bottom:1rem}
.card{background:#fff;border:2px solid var(--pale);border-radius:1rem;padding:1rem 1.25rem;margin-bottom:1rem}
.card.rec{border-color:var(--red)}
.card h2{margin:.1rem 0 .2rem;font-size:1.1rem}
.title{margin:0 0 .6rem}
.timeline{position:relative;height:2.4rem;margin:.4rem 0 1.4rem;background:linear-gradient(var(--pale),var(--pale)) center/100% 4px no-repeat}
.tick{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:.8rem;font-weight:700}
.tick::before{content:"";display:block;width:.9rem;height:.9rem;margin:0 auto .1rem;border-radius:50%;background:var(--blue);border:2px solid var(--navy)}
.rec .tick::before{background:var(--red)}
.axis{display:flex;justify-content:space-between;font-size:.75rem;color:#4a5f8a}
.meter{height:.8rem;background:var(--pale);border-radius:1rem;overflow:hidden}
.meter>span{display:block;height:100%;background:var(--blue)}.rec .meter>span{background:var(--red)}
.delta{font-weight:700}.delta.up{color:var(--ok)}.delta.down{color:var(--red)}
footer{text-align:center;padding:1.5rem;font-size:.85rem;color:#4a5f8a}