:root{
  --navy:#111111; --navy-d:#000000; --navy-l:#B00F25; --crimson:#C8102E; --crimson-d:#9A0C1F;
  --bg:#F4F4F4; --card:#FFFFFF; --ink:#111111; --muted:#5E5E5E; --line:#E2E2E2; --soft:#F1F1F1;
  --ok:#2E7D32; --ok-bg:#E6F4EA; --warn:#B26A00; --warn-bg:#FFF4E0; --err:#C62828; --err-bg:#FDECEC;
  --r:12px; --sh:0 1px 3px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Segoe UI",Inter,system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
a{color:var(--navy-l);text-decoration:none}a:hover{text-decoration:underline}
.ic{vertical-align:-4px;flex:none}
h1,h2,h3{color:var(--navy);line-height:1.2;margin:0 0 .5em}
h1{font-size:28px}h2{font-size:20px}h3{font-size:16px}
.muted{color:var(--muted)}.small{font-size:13px}
/* header */
.top{background:var(--navy);color:#fff;border-bottom:4px solid var(--crimson)}
.top .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:28px;padding:0 24px;height:64px}
.brand{display:flex;align-items:center;gap:12px;color:#fff!important;text-decoration:none!important}
.mark{width:38px;height:38px;border-radius:9px;background:var(--crimson);display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.5px}
.brand b{display:block;font-size:15px;line-height:1.1}.brand span{display:block;font-size:12px;color:#CFCFCF}
.nav{display:flex;gap:4px;flex:1}
.nav a{color:#E8E8E8;padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.nav a.on{background:rgba(255,255,255,.14);color:#fff}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:#E8E8E8}
.av{width:34px;height:34px;border-radius:50%;background:var(--navy-l);display:grid;place-items:center;font-weight:700;color:#fff}
.who a{color:#CFCFCF}
.wrap{max-width:1240px;margin:0 auto;padding:28px 24px 60px}
/* flashes */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-weight:500;border-left:5px solid}
.flash.ok{background:var(--ok-bg);border-color:var(--ok);color:#1E4D24}
.flash.error{background:var(--err-bg);border-color:var(--err);color:#7A1A1A}
/* hero */
.hero{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-d) 70%);color:#fff;border-radius:16px;padding:30px 34px;display:flex;gap:30px;align-items:center;margin-bottom:26px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(200,16,46,.35)}
.hero h1{color:#fff;font-size:30px;margin-bottom:6px}.hero p{margin:0;color:#E8E8E8;max-width:620px}
.hero .ring{margin-left:auto;position:relative;z-index:1}
/* cards & grid */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:22px}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}.nav{display:none}.hero{flex-direction:column;align-items:flex-start}}
.stat{display:flex;gap:14px;align-items:center}
.stat .si{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--navy)}
.stat .n{font-size:26px;font-weight:800;color:var(--navy);line-height:1}.stat .l{font-size:13px;color:var(--muted)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 14px}
.sec-h h2{margin:0}
/* course card */
.cc{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;color:inherit!important;text-decoration:none!important;transition:transform .12s, box-shadow .12s}
.cc:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.14)}
.cc .th{aspect-ratio:16/9;background:var(--navy) center/cover;position:relative}
.cc .th .lvl{position:absolute;left:10px;top:10px}
.cc .th .dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:3px 8px;border-radius:6px}
.cc .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.cc .cat{font-size:12px;font-weight:700;color:var(--crimson);text-transform:uppercase;letter-spacing:.6px}
.cc .t{font-weight:700;color:var(--navy);font-size:16px;line-height:1.3}
.cc .s{font-size:13px;color:var(--muted);flex:1}
.bar{height:7px;background:var(--soft);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--crimson);border-radius:9px}
.bar.ok i{background:var(--ok)}
/* chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:30px;background:var(--soft);color:var(--navy);white-space:nowrap}
.chip.done{background:var(--ok-bg);color:var(--ok)}.chip.quiz{background:var(--warn-bg);color:var(--warn)}
.chip.watching{background:#F2F2F2;color:var(--navy-l)}.chip.new{background:var(--soft);color:var(--muted)}
.chip.req{background:var(--crimson);color:#fff}.chip.white{background:rgba(255,255,255,.92);color:var(--navy)}
.chip.fail{background:var(--err-bg);color:var(--err)}
/* path card */
.pc{display:flex;gap:16px;align-items:flex-start}
.pc .pi{width:52px;height:52px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.pc.req .pi{background:var(--crimson)}
.pc h3{margin:0 0 4px}.pc p{margin:0 0 10px;color:var(--muted);font-size:14px}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:9px;padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer;background:var(--crimson);color:#fff!important;text-decoration:none!important;font-family:inherit}
.btn:hover{background:var(--crimson-d)}
.btn.sec{background:var(--soft);color:var(--navy)!important}.btn.sec:hover{background:#E5E5E5}
.btn.navy{background:var(--navy)}.btn.navy:hover{background:var(--navy-d)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn[disabled],.btn.off{background:#C4C4C4!important;cursor:not-allowed;pointer-events:none}
/* forms */
label{display:block;font-weight:600;font-size:13px;color:var(--navy);margin:0 0 5px}
input[type=text],input[type=password],input[type=number],input[type=search],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #E06A7A;border-color:var(--navy-l)}
textarea{min-height:90px}
.field{margin-bottom:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1;min-width:160px}
.check{display:flex;gap:8px;align-items:center;font-weight:500;color:var(--ink)}
/* tables */
table.t{width:100%;border-collapse:collapse;background:#fff}
table.t th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);background:#FAFAFA}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tr:hover td{background:#FAFAFA}
.tablewrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--sh)}
/* course page */
.course{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
@media(max-width:1000px){.course{grid-template-columns:1fr}}
.player{background:#000;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.player video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border:0}
.steps .b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--muted);flex:none;font-weight:800}
.steps .ok .b{background:var(--ok);color:#fff}.steps .cur .b{background:var(--crimson);color:#fff}
.steps .t{font-weight:700;color:var(--navy)}.steps .d{font-size:13px;color:var(--muted)}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:12px}.crumbs a{color:var(--muted)}
/* quiz */
.qq{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:22px 24px;margin-bottom:16px}
.qq .qn{font-size:12px;font-weight:800;color:var(--crimson);letter-spacing:.6px;text-transform:uppercase}
.qq .qt{font-size:17px;font-weight:700;color:var(--navy);margin:6px 0 14px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:2px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;font-weight:500}
.opt:hover{border-color:#E06A7A;background:#FAFAFA}
.opt input{margin-top:4px;accent-color:var(--crimson)}
.opt:has(input:checked){border-color:var(--crimson);background:#FDF3F4}
.qbar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:16px;border-radius:12px 12px 0 0;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
/* result */
.score{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;font-size:40px;font-weight:800}
.score.pass{background:var(--ok-bg);color:var(--ok);border:8px solid var(--ok)}.score.fail{background:var(--err-bg);color:var(--err);border:8px solid var(--err)}
/* matrix */
.mx td.c,.mx th.c{text-align:center}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:#E6E6E6}
.dot.done{background:var(--ok)}.dot.quiz{background:#F0A030}.dot.watching{background:#E04A5E}
.dot.req{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--crimson)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:10px 0}
.legend span{display:flex;gap:6px;align-items:center}
.subnav{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.subnav a{padding:8px 14px;border-radius:9px;background:#fff;box-shadow:var(--sh);font-weight:600;color:var(--navy)}
.subnav a.on{background:var(--navy);color:#fff}
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ic{color:#C4C4C4}
/* login */
.login-bg{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:#fff}
.login-l{background:linear-gradient(140deg,var(--navy) 0%,var(--navy-d) 80%);color:#fff;padding:60px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-l:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(200,16,46,.35);right:-140px;bottom:-140px}
.login-l h1{color:#fff;font-size:42px;margin:24px 0 10px}.login-l p{color:#CFCFCF;font-size:17px;max-width:480px}
.login-l ul{list-style:none;padding:0;margin:28px 0 0;color:#E8E8E8}.login-l li{margin:10px 0;display:flex;gap:10px;align-items:center}
.login-r{display:flex;align-items:center;justify-content:center;padding:40px}
.login-box{width:100%;max-width:380px}
@media(max-width:860px){.login-bg{grid-template-columns:1fr}.login-l{padding:36px}}
/* certificate */
@media print{.top,.noprint{display:none!important}body{background:#fff}.wrap{padding:0}}
.cert{background:#fff;max-width:1000px;margin:0 auto;min-height:620px;border:14px solid var(--navy);outline:3px solid var(--crimson);outline-offset:-26px;padding:60px 70px;text-align:center;display:flex;flex-direction:column;justify-content:center;position:relative}
.cert .k{letter-spacing:6px;font-weight:800;color:var(--crimson);font-size:14px}
.cert h1{font-size:44px;margin:10px 0 24px;font-family:Georgia,serif}
.cert .nm{font-size:40px;font-family:Georgia,serif;color:var(--ink);border-bottom:2px solid var(--line);display:inline-block;padding:0 40px 6px;margin:8px 0 18px}
.cert .ct{font-size:24px;font-weight:700;color:var(--navy);margin:6px 0 30px}
.cert .ft{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:30px;text-align:left}
footer.site{text-align:center;color:var(--muted);font-size:12px;padding:24px}
/* how-to library */
.kbrow{padding:12px 0;border-bottom:1px solid var(--line)}.kbrow:last-child{border:0}
.kbgrid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
@media(max-width:1000px){.kbgrid{grid-template-columns:1fr}}
.kb{padding:30px 38px}.kb .lead{font-size:17px;color:var(--muted);margin-top:0}
.kbbody{font-size:15.5px;line-height:1.65}
.kbbody h2{font-size:21px;margin:28px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--soft)}
.kbbody h3{font-size:17px;margin:20px 0 8px}
.kbbody ol,.kbbody ul{padding-left:24px}.kbbody li{margin:5px 0}
.kbbody code{background:var(--soft);padding:1px 6px;border-radius:5px;font-size:13.5px}
.kbbody pre{background:#000000;color:#EDEDED;padding:14px 16px;border-radius:10px;overflow-x:auto}.kbbody pre code{background:none;color:inherit}
.kbbody blockquote{margin:14px 0;padding:10px 16px;border-left:5px solid var(--crimson);background:#FDF3F4;border-radius:6px}
.kbbody .kbt{margin:14px 0;box-shadow:none;border:1px solid var(--line)}
.kbbody a{text-decoration:underline}
@media print{.kbgrid{display:block}.kb{box-shadow:none;padding:0}}
.chip.overdue{background:var(--err);color:#fff}.chip.soon{background:var(--warn-bg);color:var(--warn)}
.dot.overdue{background:var(--err)}

.btn.danger{background:#FBEAEC;color:var(--crimson,#C8102E)!important;border:1px solid #F0C4CA}.btn.danger:hover{background:#F6D5DA}
input[type=email],input[type=tel],input[type=date],input[type=file]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
details.card summary{list-style:revert}

.brand,.who{flex-shrink:0;white-space:nowrap}
.nav a{white-space:nowrap}
.navsearch{margin:0 14px 0 auto;flex-shrink:1}
.navsearch input{width:160px;padding:7px 12px;border-radius:999px;border:1px solid #444;background:#1c1c1c;color:#fff;font-size:14px}
.navsearch input::placeholder{color:#aaa}
.navsearch input:focus{outline:2px solid #C8102E}
@media (max-width:1420px){.nav a{padding:8px 10px}}
@media (max-width:1460px){.navsearch{display:none}}

/* ---- recording portal additions ---- */
.notice{padding:14px 18px;border-radius:10px;margin-bottom:18px;background:var(--warn-bg);border-left:5px solid var(--warn);color:#5A3600}
.notice.info{background:#EEF3FF;border-color:#3B5BDB;color:#1E2F6E}
.notice.danger{background:var(--err-bg);border-color:var(--err);color:#7A1A1A}
.filters{display:grid;grid-template-columns:repeat(6,1fr) auto;gap:10px;align-items:end;margin-bottom:16px}
.filters label{margin-bottom:3px}
@media(max-width:1000px){.filters{grid-template-columns:repeat(2,1fr)}}
audio.pl{width:230px;height:34px;vertical-align:middle}
.dir{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dir.inbound{background:#2E7D32}.dir.outbound{background:#1565C0}.dir.internal{background:#9E9E9E}.dir.unknown{background:#C8102E}
.mono{font-family:Consolas,Menlo,monospace;font-size:12px}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;color:var(--muted);font-size:13px}
.bulkbar{display:flex;gap:10px;align-items:center;margin:12px 0;flex-wrap:wrap}
.transcript{white-space:pre-wrap;background:var(--soft);padding:16px;border-radius:10px;font-size:14px;max-height:420px;overflow:auto}
.policy{background:#fff;padding:24px 28px;border-radius:12px;box-shadow:var(--sh);max-width:760px;margin:0 auto}
.policy ol li{margin:8px 0}
.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 14px;font-size:14px}
.kv b{color:var(--muted);font-weight:600}
.ok-txt{color:var(--ok);font-weight:700}.err-txt{color:var(--err);font-weight:700}
.mini{font-size:12px;color:var(--muted)}
.noprint{}
details.card summary{cursor:pointer;font-weight:700}