:root {
  --persian-green: #00a693;
  --persian-green-dark: #008577;
  --ink: #0f172a;
}

body { min-height: 100vh; background: #f5f7f8; color: var(--ink); }
.app-main { min-height: calc(100vh - 150px); padding-top: 2rem; padding-bottom: 3.5rem; }
.navbar-idlearn { padding: .65rem 0; background: #007f74; box-shadow: 0 5px 20px rgba(0, 77, 69, .16); }
.idlearn-brand { display: flex; align-items: center; gap: .45rem; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #008577; font-size: .85rem; font-weight: 850; }
.navbar-idlearn .nav-link { position: relative; margin: 0 .14rem; padding: .55rem .7rem; border-radius: 8px; color: rgba(255,255,255,.72); font-size: .88rem; font-weight: 600; }
.navbar-idlearn .nav-link:hover, .navbar-idlearn .nav-link.active { background: rgba(255,255,255,.11); color: #fff; }
.nav-user { display: flex; align-items: center; gap: .55rem; padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.2); color: #fff; }
.nav-avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: .82rem; font-weight: 800; }
.nav-user-copy { display: flex; flex-direction: column; line-height: 1.15; }
.nav-user-copy strong { max-width: 145px; overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-copy a { color: rgba(255,255,255,.65); font-size: .68rem; text-decoration: none; }
.app-footer { padding: 1.25rem 0; border-top: 1px solid #e1e6e8; color: #7a8490; font-size: .78rem; }
.app-footer .container { display: flex; justify-content: space-between; }
.btn-primary {
  --bs-btn-bg: var(--persian-green);
  --bs-btn-border-color: var(--persian-green);
  --bs-btn-hover-bg: var(--persian-green-dark);
  --bs-btn-hover-border-color: var(--persian-green-dark);
  --bs-btn-active-bg: var(--persian-green-dark);
  --bs-btn-active-border-color: var(--persian-green-dark);
}
.login-panel, .form-panel { max-width: 650px; background: #fff; border: 1px solid #e3e6ea; border-radius: 14px; padding: 24px; }
.card { border-color: #e3e8eb; border-radius: 14px; }
.content-card { box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.stat { min-height: 128px; background: #fff; border: 1px solid #e3e6ea; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 5px 18px rgba(15,23,42,.035); }
.stat strong { font-size: 2rem; line-height: 1; }
.stat small { color: #667085; }
.progress-bar { background-color: var(--persian-green); }
select, input, textarea { max-width: 100%; }
.btn { border-radius: 9px; font-weight: 650; }
.btn-primary { box-shadow: 0 4px 10px rgba(0, 133, 119, .14); }
.form-control, .form-select, input[type="text"], input[type="email"], input[type="number"], input[type="password"], select, textarea { border-color: #d9e0e3; border-radius: 9px; }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus { border-color: var(--persian-green); box-shadow: 0 0 0 3px rgba(0,166,147,.1); }
.alert { border: 0; border-radius: 10px; box-shadow: 0 3px 12px rgba(15,23,42,.04); }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.page-header h1 { margin: .2rem 0 .35rem; font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 760; letter-spacing: -.035em; }
.page-header p { margin: 0; color: #667085; }
.page-kicker { color: var(--persian-green-dark); font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.back-link { display: inline-block; margin-bottom: 1rem; color: #667085; font-size: .82rem; font-weight: 650; text-decoration: none; }
.back-link:hover { color: var(--persian-green-dark); }
.data-surface { overflow: hidden; border: 1px solid #e1e7e9; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.035); }
.data-surface .table thead th { padding: .85rem .9rem; border-bottom-color: #e6ebed; background: #f8fafb; color: #697480; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.data-surface .table tbody td { padding: .9rem; border-color: #edf0f1; font-size: .84rem; }
.data-surface .table tbody tr:hover { background: #fafcfc; }
.data-surface a { color: #087d70; text-decoration: none; }
.list-group-item { border-color: #e7ebed; padding: .9rem 1rem; }
.elevated-list { overflow: hidden; border-radius: 14px; box-shadow: 0 5px 18px rgba(15,23,42,.035); }
.filter-surface { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid #e1e7e9; border-radius: 14px; background: #fff; }
.filter-surface label { margin-bottom: .35rem; color: #68737e; font-size: .72rem; font-weight: 700; }
.filter-surface select, .filter-surface input { width: 100%; padding: .5rem; }
.form-surface { box-shadow: 0 8px 26px rgba(15,23,42,.05); }
.form-surface label { color: #344054; font-size: .82rem; font-weight: 700; }
.form-surface input:not([type="checkbox"]):not([type="radio"]), .form-surface select, .form-surface textarea { display: block; width: 100%; padding: .65rem .75rem; }
.form-surface .helptext { display: block; margin-top: .3rem; color: #7a8490; font-size: .72rem; }
.form-surface ul.errorlist { padding: 0; color: #b42318; font-size: .78rem; list-style: none; }
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #edf0f2; }

.detail-hero { display: flex; align-items: center; gap: 1.3rem; position: relative; margin-bottom: 2rem; padding: 2rem; overflow: hidden; border-radius: 18px; background: linear-gradient(125deg, #e1f5f1, #f2f9f7); border: 1px solid #d5ebe6; }
.detail-hero-icon { display: grid; place-items: center; flex: 0 0 76px; height: 76px; border-radius: 20px; background: #fff; color: #087d70; box-shadow: 0 8px 20px rgba(0,127,116,.1); font-size: 1.8rem; font-weight: 850; }
.detail-hero-copy { min-width: 0; }
.detail-hero h1 { margin: .2rem 0 .4rem; font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 760; letter-spacing: -.035em; }
.detail-hero p { max-width: 700px; margin: 0 0 .7rem; color: #52616d; }
.detail-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: #687680; font-size: .76rem; }
.completion-pill { align-self: flex-start; flex: none; padding: .5rem .7rem; border-radius: 999px; background: #fff; color: #08765f; font-size: .72rem; font-weight: 750; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: .8rem; }
.section-heading h2, .quiz-panel h2, .attempt-panel h2 { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 730; }
.section-heading > span { color: #77828f; font-size: .75rem; }
.resource-list { display: flex; flex-direction: column; gap: .7rem; }
.resource-item { display: flex; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid #e1e7e9; border-radius: 13px; background: #fff; color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.resource-item:hover { transform: translateX(3px); border-color: #bcd8d3; box-shadow: 0 7px 20px rgba(15,23,42,.06); }
.resource-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 10px; background: #e7f4f2; color: #087d70; font-size: .66rem; font-weight: 850; }
.resource-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.resource-copy strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.resource-copy small { color: #7a8490; font-size: .7rem; }
.resource-status { color: #087d70; font-size: .75rem; font-weight: 750; }
.resource-status.viewed { color: #38806d; }
.empty-surface { padding: 2rem; border: 1px dashed #cdd7da; border-radius: 13px; color: #7a8490; text-align: center; }
.module-video-shell { position: relative; width: 100%; margin-bottom: .55rem; padding-top: 56.25%; overflow: hidden; border-radius: 14px; background: #0f172a; box-shadow: 0 10px 28px rgba(15,23,42,.12); }
.module-video-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.module-video-shell #module-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-requirement-actions { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.5rem; }
.video-help { flex: 1; margin: 0; color: #7a8490; font-size: .7rem; }
.video-requirement-actions > a { flex: none; color: #08796c; text-decoration: none; }
.section-heading > .video-complete { color: #08765f; font-weight: 750; }
.quiz-panel, .attempt-panel { padding: 1.3rem; border: 1px solid #e1e7e9; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.035); }
.quiz-panel p { margin: .5rem 0 1rem; color: #697580; font-size: .84rem; }
.quiz-facts { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1rem; border: 1px solid #e8ecee; border-radius: 10px; }
.quiz-facts div { display: flex; flex-direction: column; padding: .7rem; }
.quiz-facts div + div { border-left: 1px solid #e8ecee; }
.quiz-facts span { color: #7a8490; font-size: .67rem; }
.quiz-locked { padding: .75rem; border-radius: 9px; background: #f1f4f5; color: #68737e; font-size: .76rem; text-align: center; }
.attempt-panel { margin-top: 1rem; }
.attempt-panel h2 { margin-bottom: .6rem; }
.attempt-row { display: flex; justify-content: space-between; align-items: center; padding: .7rem 0; border-top: 1px solid #edf0f2; color: var(--ink); text-decoration: none; }
.attempt-row > span:first-child { display: flex; flex-direction: column; font-size: .78rem; }
.attempt-row small { color: #8a949f; }
.score-pass { color: #08765f; font-weight: 800; }.score-fail { color: #b5473c; font-weight: 800; }

.assessment-shell { max-width: 820px; margin: 0 auto; }
.assessment-header { padding: 1.5rem; border-radius: 16px; background: linear-gradient(125deg,#e2f5f1,#f7faf9); }
.assessment-count { display: flex; flex-direction: column; text-align: center; }
.assessment-count strong { font-size: 1.8rem; line-height: 1; }
.assessment-count span { color: #68737e; font-size: .7rem; }
.question-card { width: 100%; min-width: 0; margin-bottom: 1rem; padding: 1.25rem; overflow: hidden; border: 1px solid #e1e7e9; border-radius: 14px; background: #fff; box-shadow: 0 4px 15px rgba(15,23,42,.03); }
.question-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .75rem; align-items: flex-start; width: 100%; margin-bottom: 1rem; }
.question-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #e7f5f2; color: #008577; font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.question-heading h2 { min-width: 0; margin: .3rem 0 0; overflow-wrap: anywhere; word-break: normal; font-size: .98rem; font-weight: 700; line-height: 1.45; }
.option-list { display: grid; gap: .55rem; }
.quiz-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: flex-start; gap: .7rem; min-width: 0; padding: .75rem .85rem; border: 1px solid #e3e8ea; border-radius: 10px; cursor: pointer; font-size: .86rem; transition: border-color .15s, background .15s; }
.quiz-option input { margin-top: .2rem; }
.quiz-option span { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.quiz-option:hover { border-color: #abd7d0; background: #f5fbfa; }
.quiz-option:has(input:checked) { border-color: var(--persian-green); background: #ecf8f6; color: #076d63; }
.quiz-option input { accent-color: var(--persian-green); }
.assessment-submit { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; }
.assessment-submit a { color: #68737e; font-size: .82rem; text-decoration: none; }

.result-card { max-width: 650px; margin: 1rem auto; padding: 2.5rem; border: 1px solid #e1e7e9; border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(15,23,42,.08); text-align: center; }
.result-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 1rem; border-radius: 50%; font-size: 1.5rem; font-weight: 850; }
.result-pass .result-icon { background: #e4f6ef; color: #08765f; }.result-fail .result-icon { background: #fff0ed; color: #b5473c; }
.result-card h1 { margin: .35rem 0; font-size: 1.75rem; font-weight: 760; }
.result-module { color: #68737e; }
.score-ring { display: flex; flex-direction: column; justify-content: center; width: 135px; height: 135px; margin: 1.5rem auto; border: 9px solid #dcefeb; border-radius: 50%; }
.result-fail .score-ring { border-color: #f2ded9; }
.score-ring strong { font-size: 1.8rem; line-height: 1.1; }.score-ring span { color: #7a8490; font-size: .68rem; }
.result-facts { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 1.5rem; border: 1px solid #e7ebed; border-radius: 11px; }
.result-facts div { display: flex; flex-direction: column; padding: .85rem .5rem; }.result-facts div + div { border-left: 1px solid #e7ebed; }
.result-facts span { color: #7a8490; font-size: .68rem; }.result-facts strong { font-size: .85rem; }

.modules-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding: 2.4rem;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.17) 0 7%, transparent 7.5%),
    radial-gradient(circle at 88% 20%, transparent 0 15%, rgba(255, 255, 255, 0.09) 15.5% 16%, transparent 16.5%),
    linear-gradient(130deg, #007f74, #00a693 65%, #37baa9);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0, 133, 119, 0.18);
}

.modules-hero h1 { margin: .35rem 0 .5rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 750; letter-spacing: -.04em; }
.modules-hero p { max-width: 620px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 1.05rem; }
.eyebrow { font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.modules-hero-action { position: relative; flex: none; padding: .7rem 1rem; border: 0; font-weight: 650; color: var(--persian-green-dark); }
.catalogue-hero { background: radial-gradient(circle at 90% 0, rgba(255,255,255,.15), transparent 24%), linear-gradient(130deg, #172c55, #174b65 58%, #007f74); }
.catalogue-count { display: flex; flex-direction: column; text-align: right; }
.catalogue-count strong { font-size: 2.2rem; line-height: 1; }
.catalogue-count span { color: rgba(255,255,255,.72); font-size: .82rem; }

.module-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 680px;
  margin: -2.4rem auto 2.25rem;
  position: relative;
  padding: .9rem 0;
  border: 1px solid #e6eaed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.module-summary div { display: flex; flex-direction: column; align-items: center; padding: .2rem 1rem; border-right: 1px solid #e9edef; }
.module-summary div:last-child { border: 0; }
.module-summary strong { font-size: 1.4rem; line-height: 1.2; }
.module-summary span { color: #667085; font-size: .78rem; }

.module-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.module-toolbar h2 { margin: 0 0 .18rem; font-size: 1.3rem; font-weight: 700; }
.module-toolbar p { margin: 0; color: #667085; font-size: .9rem; }
.module-search { display: flex; align-items: center; width: min(310px, 100%); padding: .58rem .8rem; border: 1px solid #dfe4e7; border-radius: 10px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.module-search:focus-within { border-color: var(--persian-green); box-shadow: 0 0 0 3px rgba(0, 166, 147, .1); }
.module-search svg { width: 18px; height: 18px; margin-right: .55rem; fill: none; stroke: #77828f; stroke-linecap: round; stroke-width: 1.8; }
.module-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.module-search a { color: #667085; font-size: 1.25rem; line-height: 1; text-decoration: none; }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.module-card { min-width: 0; overflow: hidden; border: 1px solid #e3e8eb; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(15, 23, 42, .045); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.module-card:hover { transform: translateY(-3px); border-color: #cbd7d7; box-shadow: 0 15px 30px rgba(15, 23, 42, .09); }
.module-card-accent { display: flex; align-items: flex-start; justify-content: space-between; height: 104px; padding: 1.15rem; }
.module-card-accent > span:first-child { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.85); box-shadow: 0 5px 15px rgba(15,23,42,.08); color: #174b65; font-size: 1.25rem; font-weight: 800; }
.accent-green { background: linear-gradient(135deg, #d9f4ee, #bfe8df); }
.accent-blue { background: linear-gradient(135deg, #dceafa, #c6dcf4); }
.accent-amber { background: linear-gradient(135deg, #fff0ce, #f5dba8); }
.accent-violet { background: linear-gradient(135deg, #ebe2fa, #d8c9f1); }
.module-state { padding: .32rem .58rem; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.module-state.complete { background: #e7f7f1; color: #08765f; }
.module-state.progress-state { background: #fff; color: #31546c; }
.module-state.new { background: rgba(255,255,255,.72); color: #667085; }
.module-card-body { display: flex; flex-direction: column; min-height: 272px; padding: 1.15rem; }
.module-card-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-bottom: .55rem; color: #77828f; font-size: .72rem; }
.module-card h3 { min-height: 2.6em; margin: 0 0 .45rem; font-size: 1.08rem; font-weight: 720; line-height: 1.3; }
.module-card-body > p { min-height: 3.9em; margin: 0 0 1rem; color: #667085; font-size: .86rem; line-height: 1.5; }
.module-progress-row { display: flex; justify-content: space-between; margin-top: auto; color: #667085; font-size: .75rem; }
.module-progress-row strong { color: var(--ink); }
.module-progress { height: 6px; margin: .45rem 0 1rem; background: #edf1f2; }
.module-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .9rem; border-top: 1px solid #edf0f2; color: #77828f; font-size: .74rem; }
.module-card-footer a, .card-action-button { flex: none; border: 0; background: transparent; color: var(--persian-green-dark); font-size: .78rem; font-weight: 750; text-decoration: none; }
.card-action-button { padding: 0; }
.module-card-footer a:hover, .card-action-button:hover { color: #005d55; }
.catalogue-details { display: flex; gap: 1.75rem; margin-top: auto; margin-bottom: 1rem; }
.catalogue-details span { display: flex; flex-direction: column; }
.catalogue-details small { color: #8a949f; font-size: .62rem; letter-spacing: .08em; }
.catalogue-details strong { font-size: .92rem; }
.module-empty { grid-column: 1 / -1; padding: 4rem 1rem; border: 1px dashed #ccd6da; border-radius: 16px; background: #fff; text-align: center; }
.module-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 14px; background: #e5f5f2; color: var(--persian-green-dark); font-size: 1.4rem; }
.module-empty h2 { font-size: 1.2rem; }
.module-empty p { color: #667085; }

.module-list-view { display: flex; flex-direction: column; gap: .85rem; }
.module-list-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 220px;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  overflow: hidden;
  border: 1px solid #e0e6e8;
  border-left: 5px solid #b89162;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 5px 17px rgba(15,23,42,.035);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.module-list-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15,23,42,.075); }
.module-list-card.status-completed { border-left-color: #27866c; background: #f8fcfa; }
.module-list-card.status-not-started { border-left-color: #a87a48; background: #fffcf7; }
.module-list-card.status-not-passed { border-left-color: #d5796e; background: #fffafa; }
.module-list-card.status-unassigned {
  border: 2px solid #00a693;
  border-left-width: 6px;
  background: linear-gradient(90deg, #eefaf8 0, #fff 28%);
  box-shadow: 0 7px 22px rgba(0,166,147,.11);
}
.module-list-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #f4eade; color: #8b6339; }
.status-completed .module-list-icon { background: #dff2eb; color: #22745e; }
.status-not-passed .module-list-icon { background: #fae7e4; color: #b85c52; }
.status-unassigned .module-list-icon { background: #d9f3ee; color: #008577; }
.module-list-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.module-list-content { min-width: 0; }
.module-list-content .module-card-meta { margin-bottom: .35rem; }
.module-list-content h3 { margin: 0 0 .3rem; font-size: 1.08rem; font-weight: 750; }
.module-list-content > p { max-width: 780px; margin: 0; color: #667085; font-size: .83rem; line-height: 1.45; }
.module-list-progress { display: grid; grid-template-columns: 120px minmax(100px, 260px); align-items: center; gap: .75rem; margin-top: .75rem; }
.module-list-progress > div:first-child { display: flex; justify-content: space-between; color: #6f7a85; font-size: .7rem; }
.module-list-progress .progress { height: 5px; background: rgba(125,108,87,.12); }
.status-not-started .progress-bar { background: #a87a48; }
.status-not-passed .progress-bar { background: #d5796e; }
.status-completed .progress-bar { background: #27866c; }
.module-list-aside { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; padding-left: 1rem; border-left: 1px solid #e7ebed; text-align: right; }
.module-list-aside form { width: 100%; }
.module-list-aside .btn { width: 100%; white-space: nowrap; }
.module-state.not-passed { background: #fae5e2; color: #a64b42; }
.module-state.unassigned { background: #d9f3ee; color: #007d70; }
.module-list-card .module-state.new { background: #f2e7d9; color: #805b34; }
.module-score { color: #75808b; font-size: .69rem; }
.module-row-action { border: 1px solid currentColor; color: #6f5030; font-size: .76rem; }
.status-completed .module-row-action { color: #16725c; }
.status-not-passed .module-row-action { color: #a64b42; }
.module-row-action:hover { background: currentColor; color: #fff; }
.btn-add-learning { border-color: #008f81; background: #00a693; color: #fff; box-shadow: 0 5px 14px rgba(0,166,147,.2); font-size: .78rem; }
.btn-add-learning:hover { border-color: #00766b; background: #007f74; color: #fff; }
.catalogue-details.compact { gap: 1.6rem; margin: .7rem 0 0; }
.catalogue-details.compact span { flex-direction: row; align-items: baseline; gap: .4rem; }
.catalogue-details.compact strong { font-size: .75rem; }
.catalogue-list-card.status-unassigned::after {
  content: "NEW OPPORTUNITY";
  position: absolute;
  top: 0;
  right: 0;
  padding: .25rem .55rem;
  border-radius: 0 10px 0 8px;
  background: #00a693;
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.admin-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; padding: 2.2rem; border-radius: 20px; background: radial-gradient(circle at 88% 0,rgba(255,255,255,.15),transparent 28%),linear-gradient(125deg,#075e56,#008b7e 60%,#16a394); color: #fff; box-shadow: 0 15px 34px rgba(0,105,94,.17); }
.admin-hero h1 { margin: .3rem 0 .5rem; font-size: clamp(2rem,4vw,2.8rem); font-weight: 780; letter-spacing: -.04em; }
.admin-hero p { max-width: 650px; margin: 0; color: rgba(255,255,255,.78); }
.admin-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.admin-hero-actions .btn { white-space: nowrap; }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.35); color: #fff; }.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .9rem; margin-bottom: 1.5rem; }
.admin-stat-card { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: 1.1rem; border: 1px solid #e0e6e8; border-radius: 14px; background: #fff; box-shadow: 0 5px 17px rgba(15,23,42,.035); }
.admin-stat-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: #e3f3f0; color: #08796c; font-size: 1.1rem; font-weight: 800; }
.stat-minutes .admin-stat-icon { background: #f5eadc; color: #8a6035; }.stat-completion .admin-stat-icon { background: #e2f3e9; color: #237458; }.stat-score .admin-stat-icon { background: #e4eff8; color: #386d96; }.stat-pass .admin-stat-icon { background: #f1e9f7; color: #775593; }
.admin-stat-card > div { display: flex; min-width: 0; flex-direction: column; }
.admin-stat-card small { color: #77828e; font-size: .68rem; }.admin-stat-card strong { margin: .1rem 0; font-size: 1.55rem; line-height: 1; }.admin-stat-card div span { overflow: hidden; color: #87919b; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr); gap: 1.2rem; }
.admin-main-panel,.admin-side-panel,.account-panel { overflow: hidden; border: 1px solid #e0e6e8; border-radius: 15px; background: #fff; box-shadow: 0 6px 20px rgba(15,23,42,.04); }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem; border-bottom: 1px solid #edf0f1; }
.panel-heading h2 { margin: .15rem 0 0; font-size: 1.08rem; font-weight: 750; }.panel-heading > a,.panel-heading > span { color: #687680; font-size: .72rem; text-decoration: none; }
.module-performance-row { display: grid; grid-template-columns: 38px minmax(140px,1fr) minmax(150px,.75fr) 75px; align-items: center; gap: .8rem; padding: .9rem 1.2rem; border-bottom: 1px solid #edf0f1; color: var(--ink); text-decoration: none; transition: background .15s; }
.module-performance-row:hover { background: #f8fbfa; }.module-performance-row:last-child { border-bottom: 0; }
.performance-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #e6f3f1; color: #08796c; }
.performance-copy { display: flex; min-width: 0; flex-direction: column; }.performance-copy strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }.performance-copy small { color: #87919b; font-size: .67rem; }
.performance-progress { display: flex; align-items: center; gap: .55rem; }.performance-progress > span,.person-progress > span { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: #e9eeef; }.performance-progress i,.person-progress i { display: block; height: 100%; border-radius: inherit; background: #27866c; }.performance-progress small { width: 30px; color: #65717c; font-size: .68rem; }
.performance-score { display: flex; flex-direction: column; text-align: right; }.performance-score small { color: #8a949f; font-size: .56rem; }.performance-score strong { font-size: .85rem; }
.completion-feed-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid #edf0f1; color: var(--ink); text-decoration: none; }
.user-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #dff1ed; color: #08796c; font-size: .72rem; font-style: normal; font-weight: 800; }
.completion-feed-item > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }.completion-feed-item strong { overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }.completion-feed-item small,.completion-feed-item time { overflow: hidden; color: #87919b; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }.completion-feed-item b { color: #237458; font-size: .76rem; }
.empty-feed { padding: 2rem 1rem; color: #87919b; font-size: .8rem; text-align: center; }.panel-footer-link { display: block; padding: .8rem; background: #fafcfc; color: #08796c; font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }

.people-summary { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 1.25rem; border: 1px solid #e0e6e8; border-radius: 14px; background: #fff; box-shadow: 0 5px 17px rgba(15,23,42,.035); }
.people-summary > div { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.2rem; border-right: 1px solid #e8ecee; }.people-summary > div:last-child { border: 0; }
.summary-dot { width: 9px; height: 9px; border-radius: 50%; background: #607d98; box-shadow: 0 0 0 5px #edf3f7; }.dot-active { background: #27866c; box-shadow: 0 0 0 5px #e7f4ef; }.dot-engaged { background: #b6874f; box-shadow: 0 0 0 5px #f7efe5; }.dot-admin { background: #7b5c95; box-shadow: 0 0 0 5px #f1eaf6; }
.people-summary p { display: flex; margin: 0; flex-direction: column; }.people-summary strong { font-size: 1.25rem; line-height: 1.1; }.people-summary small { color: #7d8791; font-size: .65rem; }
.directory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }.directory-search { width: min(390px,100%); }.directory-toolbar > span { color: #7d8791; font-size: .72rem; }
.people-list { overflow: hidden; border: 1px solid #e0e6e8; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(15,23,42,.04); }
.people-list-head,.person-row { display: grid; grid-template-columns: minmax(210px,1.4fr) 125px minmax(150px,1fr) 90px 100px 24px; align-items: center; gap: .8rem; }
.people-list-head { padding: .7rem 1rem; background: #f7f9fa; color: #7d8791; font-size: .6rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.person-row { padding: .85rem 1rem; border-top: 1px solid #edf0f1; color: var(--ink); text-decoration: none; transition: background .15s,transform .15s; }.person-row:hover { background: #f8fbfa; }
.person-identity { display: flex; align-items: center; gap: .7rem; min-width: 0; }.person-identity > span { display: flex; min-width: 0; flex-direction: column; }.person-identity strong,.person-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.person-identity strong { font-size: .8rem; }.person-identity small { color: #7d8791; font-size: .65rem; }
.person-status { display: flex; align-items: flex-start; flex-direction: column; gap: .3rem; }.role-pill { display: inline-block; padding: .22rem .45rem; border-radius: 999px; background: #edf1f3; color: #52616d; font-size: .6rem; font-style: normal; font-weight: 750; }.role-admin { background: #eee7f4; color: #694e7e; }
.person-status small,.account-active,.account-inactive { font-size: .62rem; }.account-active { color: #237458; }.account-inactive { color: #b5473c; }
.person-progress { display: flex; flex-direction: column; gap: .35rem; }.person-progress > span { width: 100%; }.person-progress small { color: #7d8791; font-size: .64rem; }.person-progress b { color: #344054; }
.person-assessment,.person-login { display: flex; flex-direction: column; }.person-assessment strong { font-size: .82rem; }.person-assessment small,.person-login small { color: #87919b; font-size: .62rem; }.person-login { font-size: .7rem; }.person-arrow { color: #87919b; }

.profile-hero { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; padding: 1.6rem; border: 1px solid #d8ebe7; border-radius: 18px; background: linear-gradient(120deg,#edf8f6,#fff); }
.profile-avatar { display: grid; place-items: center; flex: 0 0 76px; height: 76px; border-radius: 20px; background: #007f74; color: #fff; font-size: 1.7rem; font-weight: 800; box-shadow: 0 8px 18px rgba(0,127,116,.18); }
.profile-identity { min-width: 0; flex: 1; }.profile-identity h1 { margin: .2rem 0; font-size: 1.7rem; font-weight: 770; letter-spacing: -.03em; }.profile-identity p { margin: 0 0 .55rem; color: #687580; }.profile-identity > div { display: flex; gap: .6rem; align-items: center; }
.profile-completion { display: flex; align-items: center; flex-direction: column; gap: .35rem; color: #687580; font-size: .65rem; }.profile-ring { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#27866c calc(var(--progress)*1%),#dce9e5 0); position: relative; }.profile-ring::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#fff; }.profile-ring strong { position: relative; z-index: 1; font-size: .9rem; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-bottom: 1.2rem; }.profile-stat-grid > div { position: relative; display: flex; overflow: hidden; padding: 1rem; border: 1px solid #e0e6e8; border-radius: 13px; background: #fff; flex-direction: column; }.profile-stat-grid small { color: #7d8791; font-size: .66rem; }.profile-stat-grid strong { margin-top: .2rem; font-size: 1.4rem; }.profile-stat-grid strong span { color: #9aa2aa; font-size: .75rem; }.stat-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #27866c; }.stat-line.brown { background:#a87a48 }.stat-line.blue { background:#4c7da3 }.stat-line.violet { background:#805e99 }
.profile-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,.65fr); gap: 1.2rem; }.profile-layout > main { overflow: hidden; border: 1px solid #e0e6e8; border-radius: 15px; background: #fff; }.profile-layout > aside { display: flex; flex-direction: column; gap: 1rem; }
.profile-module-row { display: grid; grid-template-columns: 36px minmax(160px,1fr) 60px 75px 100px; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid #edf0f1; color: var(--ink); text-decoration: none; }.profile-module-row:hover { background: #fafcfc; }.profile-module-copy { display: flex; min-width: 0; flex-direction: column; }.profile-module-copy strong { overflow:hidden;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap }.profile-module-copy small { color:#87919b;font-size:.62rem }.profile-module-attempts,.profile-module-score { display:flex;flex-direction:column;text-align:center }.profile-module-attempts small,.profile-module-score small { color:#929ba4;font-size:.52rem }.profile-module-attempts strong,.profile-module-score strong { font-size:.76rem }
.activity-heading { border-top: 8px solid #f5f7f8; }.attempt-timeline > div { display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:.55rem;align-items:center;padding:.7rem 1.2rem;border-bottom:1px solid #edf0f1 }.timeline-dot { width:8px;height:8px;border-radius:50%;background:#d5796e;box-shadow:0 0 0 4px #f9e9e7 }.timeline-dot.passed { background:#27866c;box-shadow:0 0 0 4px #e3f2ed }.attempt-timeline div > span:nth-child(2){display:flex;flex-direction:column}.attempt-timeline strong{font-size:.75rem}.attempt-timeline small{color:#87919b;font-size:.61rem}.attempt-timeline b{font-size:.75rem}
.account-panel dl { margin:0;padding:.3rem 1rem }.account-panel dl div { display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid #edf0f1;font-size:.7rem }.account-panel dl div:last-child{border:0}.account-panel dt{color:#7d8791;font-weight:500}.account-panel dd{margin:0;max-width:60%;font-weight:650;text-align:right;overflow-wrap:anywhere}.document-activity{padding:.2rem 1rem}.document-activity > div{display:flex;align-items:center;gap:.65rem;padding:.65rem 0;border-bottom:1px solid #edf0f1}.document-activity > div>span{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#e7f3f1;color:#08796c;font-size:.55rem;font-weight:800}.document-activity p{display:flex;min-width:0;margin:0;flex-direction:column}.document-activity strong,.document-activity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.document-activity strong{font-size:.7rem}.document-activity small{color:#87919b;font-size:.58rem}

.pagination-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .8rem 1rem; border: 1px solid #e0e6e8; border-radius: 13px; background: #fff; box-shadow: 0 5px 17px rgba(15,23,42,.035); }
.pagination-summary { display: flex; flex-direction: column; }.pagination-summary strong { color: #344054; font-size: .75rem; }.pagination-summary span { color: #7d8791; font-size: .65rem; }
.pagination-controls,.page-numbers { display: flex; align-items: center; gap: .3rem; }
.pagination-controls > a,.pagination-controls > span,.page-numbers > a,.page-numbers > span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 .5rem; border: 1px solid #dfe5e7; border-radius: 8px; background: #fff; color: #56636e; font-size: .72rem; font-weight: 700; text-decoration: none; }
.pagination-controls a:hover { border-color: #8fc9bf; background: #f0f9f7; color: #08796c; }.page-numbers .current { border-color: #008f81; background: #00a693; color: #fff; box-shadow: 0 3px 8px rgba(0,166,147,.18); }
.pagination-controls .disabled { background: #f6f8f8; color: #b2b9bf; cursor: not-allowed; }.page-numbers .ellipsis { min-width: 24px; padding: 0; border-color: transparent; color: #87919b; }.pagination-controls .page-edge { gap: .2rem; grid-auto-flow: column; }

.learner-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1.15rem; padding: 2.2rem 2.5rem; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 88% 10%,rgba(255,255,255,.14),transparent 26%),linear-gradient(125deg,#075e56,#008d7f 62%,#24aa9b); color: #fff; box-shadow: 0 15px 34px rgba(0,105,94,.17); }
.learner-hero-copy { max-width: 680px; }.learner-hero h1 { margin: .3rem 0 .5rem; font-size: clamp(2rem,4vw,2.9rem); font-weight: 780; letter-spacing: -.045em; }.learner-hero p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); }
.learner-hero-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }.learner-hero-actions > a:not(.btn) { color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 700; text-decoration: none; }
.hero-progress-wrap { display: flex; flex: 0 0 150px; align-items: center; flex-direction: column; gap: .55rem; }.hero-progress-ring { position: relative; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; background: conic-gradient(#fff calc(var(--progress)*1%),rgba(255,255,255,.18) 0); }.hero-progress-ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#078377; }.hero-progress-ring > span { position:relative;z-index:1;display:flex;align-items:center;flex-direction:column }.hero-progress-ring strong { font-size:1.65rem;line-height:1 }.hero-progress-ring small { color:rgba(255,255,255,.7);font-size:.65rem }.hero-progress-wrap p { font-size:.68rem;text-align:center }
.learner-kpi-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.2rem }.learner-kpi-grid article { display:flex;align-items:center;gap:.8rem;padding:1rem;border:1px solid #e0e6e8;border-radius:14px;background:#fff;box-shadow:0 5px 17px rgba(15,23,42,.035) }.learner-kpi-icon { display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:12px;background:#f4eadf;color:#8a6035;font-weight:800 }.icon-pending{background:#e5f1f8;color:#3d7094}.icon-score{background:#efe8f5;color:#75558d}.icon-reading{background:#e1f2ec;color:#237458}.learner-kpi-grid article>div{display:flex;min-width:0;flex-direction:column}.learner-kpi-grid small{color:#77828e;font-size:.65rem}.learner-kpi-grid strong{margin:.1rem 0;font-size:1.35rem;line-height:1}.learner-kpi-grid strong i{font-size:.68rem;font-style:normal}.learner-kpi-grid div span{overflow:hidden;color:#8a949e;font-size:.62rem;text-overflow:ellipsis;white-space:nowrap}
.learner-dashboard-layout { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.65fr);gap:1.2rem }.learner-main-panel,.learner-activity-panel { overflow:hidden;border:1px solid #e0e6e8;border-radius:15px;background:#fff;box-shadow:0 6px 20px rgba(15,23,42,.04) }
.dashboard-module-row { display:grid;grid-template-columns:38px minmax(170px,1fr) minmax(120px,.55fr) 95px 18px;align-items:center;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid #edf0f1;color:var(--ink);text-decoration:none;transition:background .15s }.dashboard-module-row:hover{background:#f8fbfa}.dashboard-module-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#f3e9dd;color:#8a6035}.dashboard-module-complete .dashboard-module-icon{background:#e2f3eb;color:#237458}.dashboard-module-attempted .dashboard-module-icon{background:#f9e7e4;color:#b65b51}.dashboard-module-copy{display:flex;min-width:0;flex-direction:column}.dashboard-module-copy strong{overflow:hidden;font-size:.79rem;text-overflow:ellipsis;white-space:nowrap}.dashboard-module-copy small{color:#87919b;font-size:.62rem}.dashboard-module-progress{display:flex;align-items:center;gap:.45rem}.dashboard-module-progress>span{flex:1;height:6px;overflow:hidden;border-radius:999px;background:#e9eeef}.dashboard-module-progress i{display:block;height:100%;border-radius:inherit;background:#27866c}.dashboard-module-progress small{width:28px;color:#7c8791;font-size:.62rem}.dashboard-arrow{color:#89939c}
.dashboard-empty{padding:3rem 1rem;text-align:center}.dashboard-empty>span{display:grid;place-items:center;width:44px;height:44px;margin:0 auto .7rem;border-radius:12px;background:#e5f3f0;color:#08796c}.dashboard-empty h3{font-size:1rem}.dashboard-empty p{color:#7d8791;font-size:.75rem}.dashboard-empty.compact{padding:2rem 1rem}
.learner-activity-feed>a{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.8rem 1rem;border-bottom:1px solid #edf0f1;color:var(--ink);text-decoration:none}.activity-result-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f9e7e4;color:#b65b51;font-size:.72rem;font-weight:800}.activity-result-icon.passed{background:#e2f3eb;color:#237458}.learner-activity-feed a>span:nth-child(2){display:flex;min-width:0;flex-direction:column}.learner-activity-feed strong{overflow:hidden;font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.learner-activity-feed small{color:#87919b;font-size:.58rem}.learner-activity-feed b{font-size:.72rem}.learning-summary-strip{display:grid;grid-template-columns:1fr 1fr;background:#f8fafb}.learning-summary-strip>div{display:flex;padding:.75rem;align-items:center;flex-direction:column}.learning-summary-strip>div+div{border-left:1px solid #e5eaec}.learning-summary-strip strong{font-size:1rem}.learning-summary-strip span{color:#87919b;font-size:.58rem}
.admin-insight-strip{display:grid;grid-template-columns:1.35fr 1fr;gap:.9rem;margin-bottom:1.2rem}.learning-funnel,.admin-attention{padding:1rem 1.15rem;border:1px solid #e0e6e8;border-radius:14px;background:#fff;box-shadow:0 5px 17px rgba(15,23,42,.035)}.learning-funnel>div{display:flex;align-items:center;justify-content:space-between;margin-top:.65rem}.learning-funnel p,.admin-attention p{display:flex;margin:0;flex-direction:column}.learning-funnel strong,.admin-attention strong{font-size:1.1rem;line-height:1.1}.learning-funnel small,.admin-attention small{color:#87919b;font-size:.59rem}.learning-funnel i{color:#b3bbc1;font-style:normal}.admin-attention>div{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.65rem}.admin-attention p{padding-left:.7rem;border-left:3px solid #d5796e}.admin-attention p:nth-child(2){border-color:#b6874f}.admin-attention p:nth-child(3){border-color:#7187a1}

.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .7rem;
  border: 1px solid #dfe6e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(15,23,42,.035);
}

.viewer-page-status {
  min-width: 110px;
  text-align: center;
  font-weight: 600;
}

.pdf-viewer-shell {
  width: 100%;
  min-height: 70vh;
  padding: 16px;
  background: #eef2f5;
  border: 1px solid #d9e1e7;
  border-radius: 8px;
  overflow: auto;
  text-align: center;
}

#pdf-canvas {
  max-width: 100%;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  gap: 3rem;
  min-height: calc(100vh - 8rem);
  align-items: stretch;
}

.login-left {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 13vh;
}

.login-shell .login-panel {
  width: 100%;
  max-width: 360px;
  padding: 0;
  border: 0;
  background: transparent;
}

.login-logo {
  width: 54px;
  margin-bottom: 1.5rem;
}

.login-title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.1;
}

.login-copy {
  margin: 0 0 1.25rem;
  color: #667085;
  font-size: 1rem;
  line-height: 1.5;
}

.login-status {
  margin: 0 0 0.65rem;
  color: #667085;
  font-size: 0.92rem;
  text-align: center;
}

.login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--persian-green);
  background: #ffffff;
  color: var(--persian-green-dark);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.login-button:hover {
  background: var(--persian-green);
  border-color: var(--persian-green);
  color: #ffffff;
}

.login-right {
  min-height: calc(100vh - 8rem);
  padding: 3.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at top right, rgba(0, 166, 147, 0.35), transparent 24%),
    radial-gradient(circle at bottom left, rgba(94, 224, 255, 0.28), transparent 20%),
    linear-gradient(180deg, #dcf4f0 0%, #d8ece8 100%);
  border-radius: 8px;
}

.brand-copy {
  max-width: 360px;
}

.brand-title {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.02;
}

.brand-subtitle {
  margin: 0;
  color: #475467;
  font-size: 1rem;
  line-height: 1.45;
}

.brand-vehicle {
  width: 100%;
  max-width: 300px;
  align-self: flex-end;
  filter: drop-shadow(0 18px 28px rgba(16, 24, 40, 0.12));
}

.local-login-form input {
  display: block;
  width: 100%;
}

@media (max-width: 900px) {
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-user { margin-top: .5rem; padding: .7rem 0 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
  .navbar-idlearn .nav-link { margin: .1rem 0; }
  .detail-hero { align-items: flex-start; flex-wrap: wrap; }
  .completion-pill { position: absolute; top: 1rem; right: 1rem; }
  .module-list-card { grid-template-columns: 52px minmax(0,1fr); }
  .module-list-aside { grid-column: 2; align-items: flex-start; padding: .8rem 0 0; border-top: 1px solid #e7ebed; border-left: 0; text-align: left; }
  .module-list-aside .btn, .module-list-aside form { width: auto; }
  .admin-stat-grid,.profile-stat-grid { grid-template-columns: repeat(2,1fr); }
  .admin-layout,.profile-layout { grid-template-columns: 1fr; }
  .people-list-head { display: none; }
  .person-row { grid-template-columns: minmax(180px,1.5fr) 120px minmax(140px,1fr) 24px; }
  .person-assessment,.person-login { display: none; }
  .profile-layout > aside { display: grid; grid-template-columns: 1fr 1fr; }
  .learner-kpi-grid{grid-template-columns:repeat(2,1fr)}.learner-dashboard-layout{grid-template-columns:1fr}.admin-insight-strip{grid-template-columns:1fr}

  .login-shell {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .login-left {
    padding-top: 3rem;
  }

  .login-right {
    min-height: auto;
    padding: 2rem;
    gap: 2rem;
  }

  .brand-vehicle {
    align-self: center;
    max-width: 220px;
  }
}

@media (max-width: 640px) {
  .app-main { padding-top: 1.25rem; }
  .page-header { align-items: stretch; flex-direction: column; }
  .page-header .btn-group { display: grid; grid-template-columns: 1fr 1fr; }
  .page-header .btn-group .btn { border-radius: 8px !important; }
  .detail-hero { padding: 1.25rem; }
  .detail-hero-icon { flex-basis: 54px; height: 54px; border-radius: 14px; font-size: 1.25rem; }
  .detail-hero-copy { flex-basis: calc(100% - 72px); }
  .completion-pill { position: static; }
  .resource-status { font-size: 0; }.resource-status::after { content: "→"; font-size: .9rem; }.resource-status.viewed::after { content: "✓"; }
  .result-card { padding: 1.5rem 1rem; }
  .result-facts { grid-template-columns: 1fr; }.result-facts div + div { border-top: 1px solid #e7ebed; border-left: 0; }
  .assessment-submit { align-items: stretch; flex-direction: column-reverse; gap: .8rem; text-align: center; }
  .app-footer .container { gap: .5rem; flex-direction: column; text-align: center; }
  .modules-hero { align-items: flex-start; flex-direction: column; padding: 1.6rem; border-radius: 14px; }
  .modules-hero h1 { font-size: 2rem; }
  .catalogue-count { text-align: left; }
  .module-summary { margin-top: -1.2rem; }
  .module-summary div { padding-inline: .4rem; }
  .module-toolbar { align-items: stretch; flex-direction: column; }
  .catalogue-toolbar > div:last-child { flex-direction: column; }
  .module-search { width: 100%; }
  .module-grid { grid-template-columns: 1fr; }
  .module-list-card { grid-template-columns: 1fr; padding: 1rem; }
  .module-list-icon { width: 44px; height: 44px; }
  .module-list-content, .module-list-aside { grid-column: 1; }
  .module-list-progress { grid-template-columns: 1fr; gap: .3rem; }
  .module-list-aside .btn, .module-list-aside form { width: 100%; }
  .admin-hero { align-items: stretch; flex-direction: column; padding: 1.5rem; }
  .admin-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-hero-actions .btn:last-child { grid-column: 1/-1; }
  .admin-stat-grid,.profile-stat-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .admin-stat-card { align-items: flex-start; padding: .85rem; flex-direction: column; }
  .module-performance-row { grid-template-columns: 34px minmax(0,1fr) 60px; }
  .performance-progress { grid-column: 2/-1; }.performance-score { grid-column: 3; grid-row: 1; }
  .people-summary { grid-template-columns: 1fr 1fr; }.people-summary > div { border-bottom: 1px solid #e8ecee; }.people-summary > div:nth-child(2) { border-right:0 }.people-summary > div:nth-child(3),.people-summary > div:nth-child(4) { border-bottom:0 }
  .directory-toolbar { align-items:stretch;flex-direction:column }.directory-toolbar > span { text-align:right }
  .person-row { grid-template-columns: 1fr auto; gap:.7rem }.person-status { align-items:flex-end }.person-progress { grid-column:1/-1 }.person-arrow{display:none}
  .profile-hero { align-items:flex-start;flex-wrap:wrap;padding:1.15rem }.profile-avatar{flex-basis:54px;height:54px;border-radius:14px;font-size:1.2rem}.profile-identity{flex-basis:calc(100% - 72px)}.profile-completion{width:100%;align-items:center;flex-direction:row;justify-content:flex-end}.profile-ring{width:48px;height:48px}.profile-ring::after{inset:5px}.profile-ring strong{font-size:.7rem}
  .profile-stat-grid > div { padding:.8rem }.profile-stat-grid strong{font-size:1.1rem}
  .profile-module-row { grid-template-columns:34px minmax(0,1fr) auto }.profile-module-attempts,.profile-module-score{display:none}.profile-module-row .module-state{grid-column:2/-1;justify-self:start}
  .profile-layout > aside { grid-template-columns:1fr }
  .video-requirement-actions { align-items: stretch; flex-direction: column; }
  .pagination-panel { align-items: stretch; flex-direction: column; }
  .pagination-summary { text-align: center; }
  .pagination-controls { justify-content: center; }
  .pagination-controls .page-edge span { display: none; }
  .pagination-controls > a,.pagination-controls > span,.page-numbers > a,.page-numbers > span { min-width: 29px; height: 30px; padding: 0 .35rem; }
  .learner-hero{align-items:flex-start;flex-direction:column;padding:1.5rem}.hero-progress-wrap{align-self:center;flex-basis:auto}.hero-progress-ring{width:108px;height:108px}.learner-kpi-grid{grid-template-columns:1fr 1fr;gap:.55rem}.learner-kpi-grid article{align-items:flex-start;padding:.8rem;flex-direction:column}.dashboard-module-row{grid-template-columns:34px minmax(0,1fr) auto}.dashboard-module-progress{grid-column:2/-1}.dashboard-module-row .module-state{grid-column:2;justify-self:start}.dashboard-arrow{grid-column:3;grid-row:1}.learning-funnel>div{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.learning-funnel i{display:none}.admin-attention>div{grid-template-columns:1fr}
}