*{box-sizing:border-box}body{margin:0;font:16px system-ui,sans-serif;background:#f4f6f8;color:#0A2540}
header{background:#0A2540;color:#fff;padding:12px 14px 0;position:sticky;top:0;z-index:2}h1{margin:0;font-size:22px}header small{opacity:.8}
nav{display:flex;margin-top:8px}nav button{flex:1;background:none;border:0;color:#cfe;padding:10px;font-size:15px;border-bottom:3px solid transparent}nav button.on{color:#fff;border-color:#f5a623}
main{padding:12px;max-width:640px;margin:auto}h2{font-size:19px;margin:8px 0}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.opt{background:#fff;border:2px solid #d5dce3;border-radius:10px;padding:8px;text-align:center;font-size:14px}.opt.on{border-color:#f5a623}.opt svg{width:100%;height:60px}
.row{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}.row button{flex:1;padding:10px;border-radius:8px;border:1px solid #bcc;background:#fff;font-size:14px}
#progress{font-size:13px;color:#567}.card{background:#fff;border-radius:10px;padding:10px;margin:8px 0;box-shadow:0 1px 2px #0002}.card svg{width:100%;height:50px;background:#fafafa;border-radius:6px}
.card h3{margin:4px 0;font-size:16px}.yrs{display:inline-block;background:#0A2540;color:#fff;border-radius:6px;padding:2px 8px;font-size:13px}.small{font-size:12px;color:#567}
.note{background:#fff8e6;border-left:4px solid #f5a623;padding:10px;margin:10px 0;font-size:14px}.warn{background:#fdecec;border-color:#c33}
#search{width:100%;padding:12px;font-size:16px;border-radius:8px;border:1px solid #bcc}