:root{--red:#c9141d;--red-dark:#a90f17;--ink:#111;--muted:#626262;--line:#e5e5e5;--paper:#f6f6f6;--white:#fff;--black:#050505}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--red-dark);text-underline-offset:3px}
.container{width:min(1000px,calc(100% - 36px));margin-inline:auto}
.masthead{background:var(--black);color:white;padding:22px 0;border-bottom:6px solid var(--red)}
.brand{display:flex;align-items:center;gap:24px}
.logo{width:150px;height:auto;max-height:132px;object-fit:contain;background:#fff;border-radius:5px;padding:5px}
.brand h1{font:800 34px/1.1 system-ui,sans-serif;letter-spacing:.04em;margin:0;color:#fff}
.brand p{margin:4px 0 0;color:#eee}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:var(--red-dark);margin:0 0 6px}
.masthead .eyebrow{color:#ffb9bc}
.intro{padding:42px 0 24px}
.intro h2{font:800 clamp(27px,4vw,38px)/1.15 system-ui,sans-serif;color:var(--black);margin:0 0 12px}
.intro p:last-child{max-width:760px;color:#505050;margin:0}
.search-panel,.record,.institutional,.notice{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;padding:26px;margin:16px 0;box-shadow:0 8px 26px #0000000a}
.search-panel h2,.institutional h2,.notice h2{font:800 23px system-ui,sans-serif;color:var(--black);margin:0 0 16px}
#lookup-form{display:grid;gap:9px;max-width:560px}
label{font-size:14px;font-weight:750;margin-top:7px}
input{width:100%;border:1px solid #bdbdbd;border-radius:8px;padding:13px 14px;font:inherit;background:#fff;color:var(--ink)}
input:focus{outline:3px solid #c9141d2b;border-color:var(--red)}
#cpf-help{color:var(--muted);line-height:1.45}
button{justify-self:start;margin-top:10px;background:var(--red);color:#fff;border:0;border-radius:8px;padding:12px 22px;font:750 15px system-ui;cursor:pointer}
button:hover{background:var(--red-dark)}
.not-found{margin:18px 0 0;color:var(--red-dark);font-weight:650}
[hidden]{display:none!important}
.record-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;border-bottom:1px solid var(--line);padding-bottom:20px}
.record-heading h2{font:800 23px system-ui,sans-serif;color:var(--black);margin:0}
.course{margin:5px 0 0;color:var(--muted)}
.status{display:inline-block;background:#e5f6eb;color:#18743b;border:1px solid #b9e4c7;border-radius:99px;padding:7px 12px;font-size:12px;font-weight:750;white-space:nowrap}
.data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;margin:8px 0 0}
.data-grid div{padding:13px 0;border-bottom:1px solid #eee;min-width:0}
.data-grid .wide{grid-column:1/-1}
dt{font-size:12px;color:var(--muted);margin-bottom:3px}
dd{margin:0;font-weight:650;overflow-wrap:anywhere}
.pending{color:#805c17;font-weight:600}
.verification{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin:18px 0 0}
.institutional h2,.notice h2{margin-bottom:12px}
.institutional p,.notice p{margin:7px 0}
footer{text-align:center;color:var(--muted);font-size:13px;padding:26px 0 42px}
footer small{display:block;max-width:760px;margin:5px auto 0}
@media(max-width:680px){.brand{align-items:center;gap:14px}.logo{width:112px}.brand h1{font-size:28px}.brand-copy .eyebrow{font-size:9px}.record-heading{flex-direction:column}.data-grid{grid-template-columns:1fr}.data-grid .wide{grid-column:auto}.search-panel,.record,.institutional,.notice{padding:19px}}