/* Wavesure Training — shell stylesheet.
   Tokens are a SNAPSHOT of the Wavesure design system that ships with the
   course export (course/_ds/…/tokens). Same values, no runtime dependency —
   per PROJECT-COORDINATION rule 1 (copied patterns are snapshots). */

@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../course/_ds/wavesure-design-system-76e3fb65-9ca6-4828-baa1-4f6c2a59cb1d/assets/fonts/Outfit-latin-variable.woff2") format("woff2")}

:root{
  --teal-50:#EFF5F6;--teal-100:#DAE7E9;--teal-200:#B5CDD1;--teal-300:#8BB0B7;--teal-500:#477A83;
  --teal-700:#33646C;--teal-800:#274E55;--teal-900:#1B383D;--teal-950:#12262A;
  --gray-0:#FFFFFF;--gray-50:#FAFAFA;--gray-100:#F5F5F5;--gray-200:#E7E7E7;--gray-300:#D2D2D2;
  --gray-400:#A9A9A9;--gray-500:#7B7B7B;--gray-600:#5C5C5C;--gray-700:#414141;--gray-900:#141414;
  --pass-600:#2E7D4F;--pass-100:#E4F1E9;--alert-600:#B3261E;--alert-100:#F7E4E3;--caution-600:#B4740F;--caution-100:#FBF0DE;
  --brand:var(--teal-700);--brand-hover:var(--teal-800);--brand-active:var(--teal-900);--brand-soft:var(--teal-50);
  --text-strong:var(--gray-900);--text-body:var(--gray-700);--text-muted:var(--gray-500);
  --surface-page:var(--gray-0);--surface-subtle:var(--gray-100);--surface-card:var(--gray-0);--surface-brand:var(--teal-700);
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);--border-brand:var(--teal-700);
  --font-sans:"Outfit","Helvetica Neue",Arial,sans-serif;
  --radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;
  --shadow-sm:0 1px 2px rgb(20 20 20 / .06),0 1px 3px rgb(20 20 20 / .04);
  --shadow-md:0 4px 12px rgb(20 20 20 / .08),0 2px 4px rgb(20 20 20 / .04);
  --shadow-xl:0 24px 48px rgb(20 20 20 / .16);
  --dur-fast:190ms;--dur-base:420ms;--ease-out:cubic-bezier(.2,.8,.3,1);--ease-spring:cubic-bezier(.34,1.42,.5,1);
  --focus-ring:0 0 0 2px var(--gray-0),0 0 0 4px var(--teal-500);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:1ms;--dur-base:1ms}}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--surface-subtle);color:var(--text-body);
  font:400 16px/1.6 var(--font-sans);-webkit-text-size-adjust:100%;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-weight:600;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:30px}h2{font-size:24px}h3{font-size:20px}h4{font-size:18px}
p{margin:0}
a{color:var(--brand)}a:hover{color:var(--teal-900);text-underline-offset:3px}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.eyebrow.muted{color:var(--text-muted)}
.muted{color:var(--text-muted)}
.small{font-size:14px}
.spec{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
.lead{font-size:18px;font-weight:300;line-height:1.6}

/* ---- layout ---- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--surface-page);
  border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:20}
.topbar .brand img{height:34px;width:auto;display:block}
.topbar .who{display:flex;align-items:center;gap:14px;font-size:14px}
.topbar .who strong{color:var(--text-strong);font-weight:600}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:32px 24px 64px}
.wrap.narrow{max-width:560px}
@media (max-width:640px){.wrap{padding:20px 16px 48px}.topbar{padding:12px 16px}}
.grid{display:grid;gap:24px}
.grid.two{grid-template-columns:1.4fr 1fr}
@media (max-width:820px){.grid.two{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.right{margin-left:auto}

/* ---- cards ---- */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.card.brand{background:var(--surface-brand);color:#fff;border-color:transparent;position:relative;overflow:hidden}
.card.brand h1,.card.brand h2,.card.brand h3{color:#fff}
.card.brand .eyebrow{color:rgb(255 255 255 / .82)}
.card.brand .muted{color:rgb(255 255 255 / .72)}
.card.brand>*{position:relative}.card.brand .field{position:absolute}
.card.tight{padding:16px 20px}
.card.flat{box-shadow:none}
.card.subtle{background:var(--surface-subtle);box-shadow:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--brand);color:#fff;font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),transform 90ms var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--brand-hover)}.btn:active{background:var(--brand-active);transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.lg{min-height:56px;font-size:18px;padding:14px 26px}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--border-default)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.quiet{background:transparent;color:var(--text-body);border-color:transparent;min-height:36px;padding:6px 10px;font-weight:500}
.btn.quiet:hover{background:var(--gray-100)}
.btn.onbrand{background:#fff;color:var(--brand)}.btn.onbrand:hover{background:var(--teal-50)}
.btn.danger{background:transparent;color:var(--alert-600);border-color:var(--border-default)}
.btn.danger:hover{background:var(--alert-100)}
.btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px}

/* ---- forms ---- */
label.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--text-strong)}
label.field .hint{font-weight:400;color:var(--text-muted)}
.input,select.input,textarea.input{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--border-default);border-radius:var(--radius-sm);
  background:#fff;font:inherit;color:var(--text-strong);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--teal-100)}
.input.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:28px;letter-spacing:.18em;text-align:center;
  text-transform:uppercase;min-height:64px;font-weight:600}
.input.pin{font-size:24px;letter-spacing:.3em;text-align:center;min-height:56px}
.error{color:var(--alert-600);font-size:14px;font-weight:500}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.seg{display:inline-flex;border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden}
.seg button{border:0;background:#fff;padding:8px 14px;font-weight:500;cursor:pointer;color:var(--text-body)}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff}
.seg button+button{border-left:1px solid var(--border-default)}

/* ---- chips / status ---- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.03em;
  background:var(--gray-100);color:var(--text-body);border:1px solid var(--border-subtle);white-space:nowrap}
.chip.pass{background:var(--pass-100);color:var(--pass-600);border-color:transparent}
.chip.brand{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.chip.caution{background:var(--caution-100);color:var(--caution-600);border-color:transparent}
.chip.alert{background:var(--alert-100);color:var(--alert-600);border-color:transparent}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* ---- module list ---- */
.modules{display:flex;flex-direction:column;gap:10px}
.module{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);background:#fff;text-align:left;cursor:pointer;width:100%;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring)}
.module:hover:not(:disabled){border-color:var(--border-brand);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.module:disabled{cursor:default;opacity:.7}
.module .n{width:44px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;font-weight:700;font-size:18px;
  background:var(--gray-100);color:var(--text-muted)}
.module.done .n{background:var(--pass-100);color:var(--pass-600)}
.module.current .n{background:var(--brand);color:#fff}
.module .t{font-weight:600;color:var(--text-strong)}
.module .s{font-size:14px;color:var(--text-muted)}
.module .n svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bar{height:6px;border-radius:999px;background:var(--gray-200);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width var(--dur-base) var(--ease-out)}
.card.brand .bar{background:rgb(255 255 255 / .24)}.card.brand .bar>i{background:#fff}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:#fff}
.stat b{display:block;font-size:28px;font-weight:700;color:var(--text-strong);line-height:1.1}
.stat span{font-size:13px;color:var(--text-muted)}
.stat.brand{background:var(--brand-soft);border-color:transparent}.stat.brand b{color:var(--brand)}
@media (max-width:560px){.stats{grid-template-columns:1fr 1fr}}

/* ---- table ---- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-default)}
.table td{padding:12px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}
.table tr:hover td{background:var(--gray-50)}
.table td.name{font-weight:600;color:var(--text-strong)}
.table .actions{white-space:nowrap;text-align:right}
.table-wrap{overflow-x:auto;margin:0 -24px;padding:0 24px}
.progress-mini{display:flex;gap:3px}
.progress-mini i{width:14px;height:6px;border-radius:2px;background:var(--gray-200)}
.progress-mini i.done{background:var(--pass-600)}.progress-mini i.cur{background:var(--brand)}

/* ---- modal / toast ---- */
.modal-back{position:fixed;inset:0;background:rgb(20 20 20 / .6);display:grid;place-items:center;padding:16px;z-index:50}
.modal{background:#fff;border-radius:var(--radius-xl);padding:28px;width:100%;max-width:520px;box-shadow:var(--shadow-xl);max-height:92vh;overflow:auto}
.modal h2{margin-bottom:6px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--gray-900);color:#fff;padding:12px 18px;border-radius:var(--radius-md);
  font-size:14px;font-weight:500;box-shadow:var(--shadow-md);z-index:60;max-width:calc(100% - 32px)}
.toast.err{background:var(--alert-600)}

/* ---- code card (invite) ---- */
.codebox{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px;border:2px dashed var(--border-default);border-radius:var(--radius-lg);background:var(--gray-50)}
.codebox b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:36px;letter-spacing:.16em;color:var(--text-strong)}
.linkbox{display:flex;gap:8px;align-items:center}
.linkbox input{flex:1}

/* ---- player ---- */
.player{position:fixed;inset:0;background:#0F1F22;display:flex;flex-direction:column;z-index:30}
.player .pbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--teal-950);color:#fff;border-bottom:1px solid rgb(255 255 255 / .12)}
.player .pbar .ptitle{font-weight:600}
.player .pbar .pmeta{font-size:13px;color:rgb(255 255 255 / .7)}
.player .pbar .btn.quiet{color:#fff}.player .pbar .btn.quiet:hover{background:rgb(255 255 255 / .12)}
.player .pbar .save{font-size:12px;color:rgb(255 255 255 / .6);display:flex;align-items:center;gap:6px}
.player .pbar .save .dot{background:var(--pass-600)}
.player .pbar .save.pending .dot{background:var(--caution-600)}
.player iframe{flex:1;width:100%;border:0;background:#fff}
.player .pdone{position:absolute;inset:0;background:rgb(18 38 42 / .92);display:grid;place-items:center;padding:24px;z-index:2}
.player .pdone .card{max-width:480px;width:100%;text-align:center}

/* ---- signature ---- */
.sig{position:relative;border:1px solid var(--border-default);border-radius:var(--radius-md);background:#fff;touch-action:none}
.sig canvas{display:block;width:100%;height:220px;border-radius:var(--radius-md)}
.sig .line{position:absolute;left:24px;right:24px;bottom:44px;border-top:1px solid var(--border-default);pointer-events:none}
.sig .hintx{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:13px;color:var(--text-muted);pointer-events:none}

/* ---- certificate preview ---- */
.cert{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:40px;position:relative;overflow:hidden}
.cert .band{height:8px;background:var(--brand);margin:-40px -40px 32px}
.cert>*{position:relative}.cert .field{position:absolute}.cert .band{position:static}
.cert .name{font-size:36px;font-weight:700;color:var(--text-strong);letter-spacing:-.02em;margin:10px 0}
.cert .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.cert .grid3 b{display:block;color:var(--text-strong);font-weight:600}
.cert .sigimg{height:60px;margin-top:8px}
@media (max-width:560px){.cert{padding:24px}.cert .band{margin:-24px -24px 20px}.cert .grid3{grid-template-columns:1fr}}
@media print{body{background:#fff}.topbar,.noprint{display:none!important}.wrap{padding:0;max-width:none}.cert{border:0}}

/* ---- login hero ---- */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login .side{background:var(--surface-brand);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login .side h1{color:#fff;font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1.05}
.login .side>*{position:relative}.login .side .field{position:absolute}
.login .side img.logo{height:44px;width:auto;align-self:flex-start}
.login .main{display:grid;place-items:center;padding:32px 24px;background:var(--surface-page)}
.login .main>div{width:100%;max-width:420px}
@media (max-width:820px){.login{grid-template-columns:1fr}.login .side{padding:28px 24px;min-height:0}.login .side h1{font-size:28px}.login .side .field{width:260px;height:260px;top:-26px;right:-26px}}
.demo-badge{position:fixed;left:12px;bottom:12px;pointer-events:none;z-index:70;background:var(--caution-100);color:var(--caution-600);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid rgb(180 116 15 / .3)}
.skel{background:linear-gradient(90deg,var(--gray-100),var(--gray-200),var(--gray-100));background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:var(--radius-sm);height:16px}
@keyframes sk{to{background-position:-200% 0}}
.table td.mono{white-space:nowrap}
.checkicon{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--pass-100);color:var(--pass-600);margin-bottom:12px}
.checkicon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.player .pcopy{font-size:11px;color:rgb(255 255 255 / .5);padding:4px 16px;background:var(--teal-950);letter-spacing:.03em;text-align:right;border-bottom:1px solid rgb(255 255 255 / .08)}
@media (max-width:640px){.player .pcopy{display:none}}
.qr svg{width:96px;height:96px;display:block}