:root{
  --paper:#F6F8FA; --card:#fff; --ink:#1A2B3E; --soft:#5B6C7E; --line:#D9E1E8;
  --accent:#14639E; --accent-soft:#E6F0F8; --green:#1E7D4E; --red:#B4232A; --amber:#9A6A1F;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif}
.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff;padding:10px 22px}
.topbar .brand{color:#fff;font-weight:700;text-decoration:none;letter-spacing:.02em}
.topbar nav{display:flex;gap:16px;align-items:center}
.topbar nav a{color:#CBD9E6;text-decoration:none}
.topbar nav a:hover{color:#fff}
.topbar .who{color:#8FA6BA;font-size:.85em}
main{max-width:1080px;margin:0 auto;padding:24px 20px 80px}
h1{font-size:1.5rem;margin:.4em 0}
h2{font-size:1.1rem;margin:1.6em 0 .5em}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:.92rem;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);padding:8px 10px;border-bottom:2px solid var(--line)}
td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right}
.money{color:var(--green);font-weight:600}
.muted{color:var(--soft)}
.ineligible td{color:#9AA8B5;background:#FAFBFC}
.pill{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:99px}
.pill.draft{background:#F2E8D5;color:var(--amber)}
.pill.submitted{background:#DFF1E7;color:var(--green)}
.pill.no{background:#F4E3E4;color:var(--red)}
.pill.yes{background:#DFF1E7;color:var(--green)}
input,select,button{font:inherit;color:inherit}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],select{
  border:1px solid var(--line);border-radius:6px;padding:6px 9px;background:#fff;max-width:100%}
input[type=number]{width:90px;text-align:right}
button,.btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;text-decoration:none;display:inline-block;font-weight:600}
button:hover,.btn:hover{filter:brightness(1.08)}
button.quiet,.btn.quiet{background:var(--accent-soft);color:var(--accent)}
button.danger{background:transparent;color:var(--red);padding:4px 8px}
.formrow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:10px 0}
.formrow label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--soft);font-weight:600}
.totalbar{display:flex;justify-content:space-between;align-items:center;background:var(--accent-soft);border:1px solid var(--line);border-radius:8px;padding:14px 20px;margin:16px 0;font-size:1.05rem}
.totalbar b{font-size:1.3rem}
.error{background:#F8E8E9;color:var(--red);border:1px solid #E7C4C6;border-radius:6px;padding:10px 14px;margin:10px 0}
.tablewrap{overflow-x:auto}
.subhead{display:flex;justify-content:space-between;align-items:baseline}
.login-box{max-width:380px;margin:70px auto}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
small.note{color:var(--soft);display:block;margin-top:6px}
.sso-buttons{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.btn.sso{background:var(--accent);text-align:center;padding:12px 16px}
.btn.sso.ms{background:#1F3A5F}
.btn.wide{width:100%;padding:12px 16px}
.divider{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:.8rem;margin:16px 0}
.divider::before,.divider::after{content:"";flex:1;border-top:1px solid var(--line)}

/* ---- mobile ---- */
@media (max-width: 720px){
  main{padding:14px 10px 60px}
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:6px}
  .topbar nav{gap:12px;flex-wrap:wrap}
  .topbar .who{display:none}
  h1{font-size:1.15rem}
  .card{padding:12px;border-radius:10px}
  .formrow{gap:10px}
  .formrow label{flex:1 1 45%;min-width:130px}
  .formrow label input,.formrow label select{width:100%}
  input,select,button{min-height:42px}
  button.danger{min-height:0}
  table{font-size:.84rem}
  th,td{padding:6px 8px}
  .totalbar{flex-direction:column;gap:4px;align-items:flex-start}
  .login-box{margin:24px auto}
  .subhead{flex-direction:column;align-items:flex-start;gap:4px}
}