:root {
  --teal: #175D64; --deep: #004B4F; --alice: #F0F8FF; --black: #181717; --gray: #939393; --rule: #D9E4E5; --bg: #FAFCFC; --ok: #1F7A4D;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--black); font-family: Poppins, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; }
.wrap { max-width: 880px; margin: 0 auto; padding: 32px 20px 56px; }
.top { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
.logo { width: 180px; height: auto; }
h1 { font-size: 26px; margin: 0; color: var(--teal); font-weight: 700; }
h2 { font-size: 18px; margin: 0 0 14px; color: var(--teal); display: flex; align-items: center; gap: 10px; }
.sub { margin: 4px 0 0; color: #4a5a5c; }
.num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .top { flex-direction: column; align-items: flex-start; } }
label { display: block; font-weight: 600; font-size: 13px; color: #33484a; }
input[type=text], input[type=email], input[type=password] { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #c9d6d8; border-radius: 8px; font: inherit; font-size: 15px; color: var(--black); background: #fff; }
input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
fieldset { border: 0; padding: 0; margin: 18px 0 0; }
legend { font-weight: 600; font-size: 13px; color: #33484a; padding: 0; margin-bottom: 8px; }
.role { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-weight: 400; }
.role:has(input:checked) { border-color: var(--teal); background: var(--alice); }
.role input { margin-top: 4px; accent-color: var(--teal); }
.role .t { font-weight: 600; color: var(--black); }
.role .d { color: #4a5a5c; font-size: 13px; }
.role .n { color: var(--gray); font-size: 12px; }
.hint { color: #4a5a5c; font-size: 14px; margin: -4px 0 16px; }
.progress { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--gray); }
.module { border: 1px solid var(--rule); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.module.done { border-color: var(--ok); background: #F3FAF6; }
.module h3 { margin: 0 0 4px; font-size: 16px; color: var(--black); display: flex; gap: 10px; align-items: baseline; }
.module .min { color: var(--gray); font-size: 12px; font-weight: 400; }
.module .sum { margin: 0 0 12px; font-size: 14px; color: #4a5a5c; }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.player iframe, .player .yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.alt { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; margin: 10px 0 0; }
.alt a { color: var(--teal); }
.complete { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 600; font-size: 14px; }
.complete input { width: 18px; height: 18px; accent-color: var(--ok); }
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #E6F4EC; color: var(--ok); }
.badge.manual { background: #FFF4E5; color: #8a5a00; }
.attest { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.55; padding: 14px; background: var(--alice); border-radius: 10px; }
.attest input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--teal); }
.actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--teal); color: #fff; border: 0; border-radius: 10px; padding: 12px 22px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--deep); }
.btn[disabled] { background: #b9c9cb; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--teal); border: 2px solid var(--teal); }
.check { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--teal); font-size: 15px; font-weight: 900; }
.btn[disabled] .check { color: #b9c9cb; }
.status { color: var(--gray); font-size: 14px; }
.errors { color: #9b1c1c; background: #FDF2F2; border: 1px solid #F5C2C2; border-radius: 8px; padding: 10px 14px 10px 30px; margin: 14px 0 0; font-size: 14px; }
.done { border-color: var(--ok); }
.bigcheck { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 18px; font-weight: 900; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 14px; margin: 12px 0; }
.kv dt { color: var(--gray); font-weight: 600; } .kv dd { margin: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #f1f4f4; padding: 1px 6px; border-radius: 4px; }
.hash { word-break: break-all; }
.foot { color: var(--gray); font-size: 12.5px; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
th { background: var(--alice); color: var(--teal); font-weight: 700; }
button { font: inherit; }
form button { background: var(--teal); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 600; cursor: pointer; margin-top: 8px; }