:root { font-family: Arial, sans-serif; color: #172033; background: #f5f7fa; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 6px; background: #0876bb; color: white; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
button.secondary { color: #172033; background: #e8eef5; }
button.danger { background: #ad293c; }
input, select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #b9c6d4; border-radius: 4px; background: white; color: #172033; }
label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
input:focus-visible, button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #00b5d4; outline-offset: 3px; }
a { color: #0876bb; }
.eyebrow { color: #26d4e9; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.login-page { min-height: 100svh; padding: 56px 7%; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); align-items: center; gap: 70px; background: #101827; color: white; }
.login-page h1 { font-size: 56px; line-height: 1.08; margin: 20px 0; overflow-wrap: anywhere; }
.login-page .intro { font-size: 22px; line-height: 1.6; max-width: 620px; }
.login-page .hp { width: 190px; height: 190px; margin-bottom: 36px; }
.login-page form { display: grid; gap: 22px; max-width: 390px; }
.login-page form h2 { font-size: 26px; margin: 0 0 8px; }
.login-page .brand { margin-top: 50px; font-size: 13px; color: #c0cddd; display: flex; align-items: center; gap: 12px; }
.brand img { width: 30px; height: 30px; background: white; border-radius: 4px; }
.login-page .admin-link { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 40px; height: 40px; display: grid; place-items: center; color: #8291a4; border-radius: 6px; }
.login-page .admin-link:hover, .login-page .admin-link:focus-visible { color: #d5e3f0; background: #1c2838; }
.admin-icon { width: 20px; height: 20px; background: currentColor; mask: url('assets/admin-icon.svg') center / contain no-repeat; }
.admin-tooltip { position: absolute; right: 0; bottom: 46px; background: #263448; color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; visibility: hidden; pointer-events: none; }
.admin-link:hover .admin-tooltip, .admin-link:focus-visible .admin-tooltip { visibility: visible; }
.status { min-height: 24px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.admin-header { padding: 18px 5%; background: #101827; color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-header h1 { font-size: 22px; margin: 0; }
.admin-header img { width: 38px; height: 38px; }
.admin-brand { display: flex; gap: 14px; align-items: center; }
.admin-main { max-width: 1280px; margin: auto; padding: 30px 24px; }
.admin-login { max-width: 420px; margin: 60px auto; display: grid; gap: 22px; }
.admin-tabs { display: flex; gap: 8px; border-bottom: 1px solid #ccd6e2; padding-bottom: 16px; }
.admin-tabs button { background: transparent; color: #172033; }
.admin-tabs button[aria-selected=true] { background: #e0edf6; color: #075b8e; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0; }
h2 { font-size: 22px; }
.table-wrap { overflow: auto; background: white; border: 1px solid #d9e1ea; }
table { border-collapse: collapse; width: 100%; font-size: 14px; white-space: nowrap; }
th, td { padding: 13px 15px; border-bottom: 1px solid #e1e7ee; text-align: left; }
th { background: #edf3f8; color: #344b60; }
td button { min-height: 34px; padding: 7px 10px; font-size: 13px; }
.group-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid #ccd6e2; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filters { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; align-items: end; }
.filters label { min-width: 190px; }
.pagination { display: flex; gap: 16px; align-items: center; margin-top: 20px; }
.pill { color: #126341; font-weight: 700; }
.pill.closed { color: #a43237; }
.empty { padding: 28px; color: #657487; }
@media (max-width: 760px) {
  .login-page { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px 24px; }
  .login-page h1 { font-size: 38px; }
  .login-page .intro { font-size: 18px; }
  .login-page .hp { width: 96px; height: 96px; margin-bottom: 8px; }
  .login-page .brand { margin-top: 26px; }
  .group-form { grid-template-columns: minmax(0, 1fr); }
  .admin-header { padding: 18px; flex-wrap: wrap; }
  .section-head { flex-wrap: wrap; }
}
.training-progress { min-width: 120px; }
.training-progress span, .training-progress small { display: block; }
.training-progress progress { display: block; width: 112px; height: 8px; margin: 6px 0; accent-color: #009ca6; }
.training-progress small { color: #617086; font-size: 12px; }