:root{
  --bg:#F7F6F3;--surface:#FFFFFF;--surface-2:#F1EFEA;--ink:#1E2A29;--ink-soft:#586462;--ink-faint:#8A9694;
  --line:#E4E0D8;--line-soft:#EEEBE4;--accent:#1C6E68;--accent-ink:#12514C;--accent-soft:#E3F0EE;
  --good:#2F7D52;--good-bg:#E5F1E9;--good-line:#C6E0D0;--warn:#9C6B1F;--warn-bg:#F6ECD9;--warn-line:#E7D3AC;
  --miss:#AF3A38;--miss-bg:#F6E3E1;--miss-line:#E7C4C1;--shadow:0 1px 2px rgba(30,42,41,.05),0 8px 24px rgba(30,42,41,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{--bg:#111716;--surface:#19211F;--surface-2:#212B29;--ink:#EBEFED;--ink-soft:#A2B1AE;--ink-faint:#6F7E7C;--line:#2B3835;--line-soft:#232F2D;--accent:#6FC7BF;--accent-ink:#8FD6CF;--accent-soft:#1B2D2B;--good:#71C593;--good-bg:#16261E;--good-line:#274035;--warn:#E0AA63;--warn-bg:#2A2213;--warn-line:#463820;--miss:#E68E86;--miss-bg:#2C1A19;--miss-line:#4A2A28;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.28);}}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-ink);text-decoration:none;} button{font:inherit;cursor:pointer;}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px clamp(16px,4vw,32px);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--accent-ink);}
.brand .wing{font-size:1.3rem;} .brand small{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);display:block;line-height:1;margin-top:2px;}
.nav{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap;} .nav a{color:var(--ink-soft);padding:7px 13px;border-radius:9px;font-size:.9rem;font-weight:500;}
.nav a:hover{background:var(--surface-2);} .nav a.active{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;}
.userbox{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.85rem;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;}
.userbox .who{text-align:right;line-height:1.15;} .userbox .who b{display:block;} .userbox .who span{font-size:.72rem;color:var(--ink-faint);}
.logout{background:none;border:1px solid var(--line);border-radius:8px;padding:5px 10px;color:var(--ink-soft);font-size:.78rem;}
.wrap{max-width:1000px;margin:0 auto;padding:clamp(18px,3vw,34px) clamp(16px,4vw,32px) 80px;}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3.5vw,2.3rem);letter-spacing:-.01em;margin:0 0 6px;}
.sub{color:var(--ink-soft);margin:0 0 22px;} h2{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:30px 0 12px;}
.messages{list-style:none;padding:0;margin:0 0 18px;} .messages li{padding:11px 16px;border-radius:10px;margin-bottom:8px;font-size:.92rem;background:var(--good-bg);border:1px solid var(--good-line);color:var(--good);}
.messages li.error{background:var(--miss-bg);border-color:var(--miss-line);color:var(--miss);}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px;} @media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);}
.stat .n{font-family:var(--serif);font-size:1.9rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;}
.stat .k{font-size:.76rem;color:var(--ink-soft);margin-top:7px;}
.stat.good .n{color:var(--good);} .stat.warn .n{color:var(--warn);} .stat.miss .n{color:var(--miss);} .stat.acc .n{color:var(--accent-ink);}
.ringcard{display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:var(--shadow);margin-bottom:22px;flex-wrap:wrap;}
.ring{width:96px;height:96px;border-radius:50%;flex:none;background:conic-gradient(var(--good) calc(var(--p,0)*1%),var(--surface-2) 0);display:flex;align-items:center;justify-content:center;}
.ring .inner{width:74px;height:74px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring .inner b{font-family:var(--serif);font-size:1.5rem;line-height:1;} .ring .inner span{font-size:.62rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;}
.ringcard .msg h3{margin:0 0 4px;font-size:1.05rem;} .ringcard .msg p{margin:0;color:var(--ink-soft);font-size:.9rem;}
.courses{display:grid;gap:10px;}
.course{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow);border-left:4px solid var(--line);}
.course:hover{border-color:var(--accent);border-left-color:var(--accent);} .course.s-passed{border-left-color:var(--good);} .course.s-due,.course.s-pending{border-left-color:var(--warn);} .course.s-none{border-left-color:var(--miss);}
.course .mid{flex:1;min-width:0;} .course .tt{font-weight:600;font-size:.96rem;color:var(--ink);}
.course .meta{font-size:.76rem;color:var(--ink-faint);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;}
.badge{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:5px;}
.badge.mand{background:var(--accent-soft);color:var(--accent-ink);} .badge.opt{background:var(--surface-2);color:var(--ink-faint);} .badge.blend{background:var(--warn-bg);color:var(--warn);}
.chip{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent;}
.chip.passed{background:var(--good-bg);color:var(--good);border-color:var(--good-line);} .chip.due,.chip.pending{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line);} .chip.none{background:var(--miss-bg);color:var(--miss);border-color:var(--miss-line);}
.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;} .filters a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.82rem;color:var(--ink-soft);} .filters a.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:11px 20px;font-weight:600;font-size:.95rem;} .btn:hover{background:var(--accent-ink);}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-soft);} .btn.ghost:hover{border-color:var(--accent);color:var(--accent-ink);}
.back{display:inline-block;color:var(--ink-soft);font-size:.88rem;margin-bottom:10px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:16px;}
.lesson h3{font-size:1.05rem;color:var(--accent-ink);margin:22px 0 6px;} .lesson p{margin:0 0 12px;}
.lesson .warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:10px 14px;margin:10px 0;font-size:.93rem;}
.q{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);}
.q .qn{font-weight:600;margin-bottom:10px;} .q .qn span{color:var(--accent-ink);font-family:var(--serif);margin-right:6px;}
.opt{display:block;margin-bottom:7px;} .opt label{display:block;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;}
.opt label:hover{border-color:var(--accent);} .opt input{margin-right:8px;}
.opt.correct label{background:var(--good-bg);border-color:var(--good-line);color:var(--good);font-weight:600;} .opt.wrong label{background:var(--miss-bg);border-color:var(--miss-line);color:var(--miss);}
.why{font-size:.84rem;color:var(--ink-soft);margin-top:6px;}
.result{background:var(--surface);border:2px solid var(--good);border-radius:14px;padding:22px;text-align:center;margin:16px 0;box-shadow:var(--shadow);} .result.fail{border-color:var(--miss);}
.result .big{font-family:var(--serif);font-size:2.2rem;font-weight:600;}
.cert{background:var(--surface);border:3px double var(--accent);border-radius:14px;padding:38px;text-align:center;box-shadow:var(--shadow);max-width:640px;margin:0 auto;}
.cert .wing{font-size:2.4rem;} .cert h2{font-family:var(--serif);font-size:1.7rem;margin:6px 0;color:var(--accent-ink);}
.cert .name{font-family:var(--serif);font-size:2rem;font-weight:600;margin:14px 0 4px;border-bottom:1px solid var(--line);display:inline-block;padding:0 24px 6px;}
.cert .mod{font-size:1.15rem;font-weight:600;margin:14px 0;} .cert .meta{font-size:.85rem;color:var(--ink-soft);margin-top:16px;line-height:1.7;}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:var(--surface);}
table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:560px;} th,td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line-soft);}
thead th{background:var(--surface-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
td.pct{font-variant-numeric:tabular-nums;font-weight:600;} .mini{width:70px;height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden;display:inline-block;vertical-align:middle;} .mini span{display:block;height:100%;background:var(--good);}
.banner{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:12px;padding:12px 16px;font-size:.85rem;color:var(--ink-soft);margin-bottom:18px;} .banner b{color:var(--ink);}
.login{max-width:400px;margin:8vh auto;text-align:center;padding:0 20px;} .login .wing{font-size:3rem;} .login h1{margin:10px 0 4px;} .login p{color:var(--ink-soft);}
.login form{margin-top:22px;text-align:left;} .login label{font-size:.82rem;color:var(--ink-soft);display:block;margin-bottom:4px;}
.login input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--surface);color:var(--ink);margin-bottom:14px;}
.policycat{margin-top:22px;} .policycat h2{margin-bottom:8px;}
.policybody{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 28px;box-shadow:var(--shadow);}
.policybody h1{font-size:1.5rem;} .policybody h2{font-size:1.15rem;} .policybody table{min-width:0;margin:10px 0;} .policybody th,.policybody td{border:1px solid var(--line);}
.ackbar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:14px 0;margin-top:20px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
/* ---- staff compliance ---- */
.chip.valid{background:var(--good-bg);color:var(--good);border-color:var(--good-line);text-transform:capitalize;}
.chip.expiring{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line);text-transform:capitalize;}
.chip.expired,.chip.missing{background:var(--miss-bg);color:var(--miss);border-color:var(--miss-line);text-transform:capitalize;}
.chip.na{background:var(--surface-2);color:var(--ink-faint);text-transform:lowercase;}
.legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-soft);margin:6px 0 14px;}
.legend .dot,.dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin-right:5px;}
.dot.valid{background:var(--good);} .dot.expiring{background:var(--warn);} .dot.expired{background:var(--miss);}
.dot.missing{background:var(--miss);opacity:.55;} .dot.na{background:var(--ink-faint);opacity:.4;}
table.matrix{min-width:720px;} table.matrix td,table.matrix th{border-bottom:1px solid var(--line-soft);}
table.matrix .stick{position:sticky;left:0;background:var(--surface);z-index:2;min-width:170px;box-shadow:1px 0 0 var(--line-soft);}
table.matrix thead .stick{background:var(--surface-2);z-index:3;}
.rolemini{display:block;font-size:.68rem;color:var(--ink-faint);margin-top:2px;} .miss-t{color:var(--miss);font-weight:700;}
th.vcol{white-space:nowrap;vertical-align:bottom;height:120px;padding:0;} th.vcol span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);padding:8px 3px;font-size:.68rem;line-height:1.1;max-height:112px;overflow:hidden;}
td.cellcol{text-align:center;padding:6px 4px;}
.cell{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;font-weight:800;font-size:.82rem;border:1px solid transparent;}
.cell.valid{background:var(--good-bg);color:var(--good);border-color:var(--good-line);}
.cell.expiring{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line);}
.cell.expired{background:var(--miss-bg);color:var(--miss);border-color:var(--miss-line);}
.cell.missing{background:var(--miss-bg);color:var(--miss);border-color:var(--miss-line);opacity:.8;}
.cell.na{background:var(--surface-2);color:var(--ink-faint);} .cell:hover{outline:2px solid var(--accent);outline-offset:1px;}
@media print{.topbar,.back,.btn,.ackbar,.no-print{display:none!important;} .wrap{padding:0;}}