@import url('./account-portal.css?ver=0.3.1-alpha.7.04');
@font-face {
  font-family: Jahat;
  src: local("Vazirmatn"), local("Tahoma");
  font-display: swap;
}
* {
  box-sizing: border-box;
}
:root {
  --navy: #07395f;
  --blue: #0062a5;
  --gold: #2f8bc7;
  --ink: #153d59;
  --muted: #6f8496;
  --line: #dce8f2;
  --paper: #f3f7fb;
}
body {
  margin: 0;
  background: #0062a5;
  color: var(--ink);
  font-family: Jahat, Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.9;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
.button {
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: white;
  padding: 11px 21px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  transition:
    transform 0.15s,
    background 0.15s;
}
button:hover,
.button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.secondary {
  background: #f2f7fc;
  color: var(--ink);
  border: 1px solid #95b9d9;
}
.secondary.danger {
  background: #fff6f5;
  border-color: #bd5145;
  color: #a4423a;
}
.secondary.danger:hover {
  background: #fbe8e6;
}
.gold {
  background: #cfe8fa;
  color: #153d59;
}
.text-link {
  color: var(--blue);
  padding: 0;
  background: none;
  text-decoration: none;
}
.icon-button {
  padding: 0;
  width: 36px;
  height: 36px;
  font-size: 26px;
  background: #f2f6fb;
  color: var(--ink);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 28px;
  line-height: 1.65;
  letter-spacing: -0.7px;
  margin-bottom: 8px;
}
h2 {
  font-size: 20px;
  margin-bottom: 15px;
}
h3 {
  font-size: 16px;
  margin-bottom: 9px;
}
p {
  margin-bottom: 16px;
}
small {
  font-size: 11px;
}
a {
  color: var(--blue);
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 9px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
}
.brand strong {
  font-size: 27px;
}
.brand small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: -5px;
}
.brand-mark {
  width: 43px;
  height: 49px;
  border: 1.5px solid #000000;
  border-radius: 16px 16px 16px 4px;
  display: grid;
  place-items: center;
  background: #edf5fc;
  color: var(--blue);
  font-weight: bold;
  font-size: 27px;
}
.layout {
  display: grid;
  grid-template-columns: 236px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: rgba(255, 255, 255, 0.93);
  border-left: 1px solid #95b9d9;
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.nav-label {
  font-size: 10px;
  color: #9aa8af;
  margin: 48px 16px 13px;
}
.nav-item {
  background: transparent;
  color: #6a7d89;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  gap: 16px;
  margin-bottom: 10px;
  padding: 12px 16px;
}
.nav-item b {
  font-size: 23px;
  line-height: 1;
  width: 24px;
  text-align: center;
  font-weight: normal;
}
.nav-item.active {
  background: #eaf4fb;
  color: var(--blue);
  font-weight: bold;
}
.sidebar-bottom {
  margin-top: auto;
}
.sidebar-note {
  border: 1px solid #abc3db;
  border-radius: 12px;
  padding: 20px 15px;
  margin: 35px 0 18px;
  background: linear-gradient(130deg, #f6faff, #edf5fc);
  font-size: 11px;
}
.sidebar-note span {
  color: var(--gold);
  font-size: 28px;
}
.sidebar-note p {
  margin: 0;
}
.sidebar-bottom > button {
  font-size: 12px;
  width: 100%;
}
.workspace {
  min-width: 0;
}
header {
  height: 82px;
  border-bottom: 1px solid #95b9d9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(5px);
  padding: 0 44px;
  font-size: 11px;
  position: relative;
}
.orientation-switch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  direction: ltr;
  gap: 5px;
  padding: 4px;
  border: 1px solid #2d7bb9;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}
.orientation-button {
  width: 36px;
  height: 32px;
  padding: 5px;
  border-radius: 7px;
  color: #477694;
  background: transparent;
}
.orientation-button svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orientation-button.active {
  color: white;
  background: var(--blue);
  box-shadow: 0 2px 8px #0062a535;
}
.orientation-button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.live-dot {
  display: inline-block;
  background: var(--blue);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 7px;
}
.header-separator {
  margin: 0 16px;
  color: #b7c6cb;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 13px;
}
.user-chip b {
  background: #deedf8;
  color: var(--blue);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
}
#content {
  max-width: 1260px;
  padding: 35px 44px 25px;
  margin: auto;
  min-height: calc(100vh - 150px);
}
.learner-mode #content {
  padding: 18px 22px;
  border-radius: 16px;
  background: #f4f7f8;
}
.admin-mode #content {
  padding: 12px 16px 18px;
  border-radius: 16px;
  background: #f4f7f8;
}
#content:has(.course-banner) {
  padding-top: 20px;
  padding-bottom: 18px;
}
.learner-mode #content:has(.course-banner) {
  padding: 12px 16px 14px;
}
#content:has(.course-banner) .page-heading {
  margin-bottom: 12px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-heading p {
  font-size: 12px;
  margin: 0;
}
.date {
  font-size: 11px;
  border: 1px solid #95b9d9;
  border-radius: 8px;
  background: #fff;
  padding: 7px 12px;
  white-space: nowrap;
}
.hero {
  background: linear-gradient(110deg, #0062a5, #07395f 65%);
  border-radius: 19px;
  color: #fff;
  min-height: 254px;
  padding: 31px 36px;
  display: flex;
  position: relative;
  overflow: hidden;
  justify-content: space-between;
}
.course-banner {
  margin-bottom: 9px;
  border-radius: 18px;
  overflow: hidden;
  background: #dceef5;
  line-height: 0;
}
.course-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2172 / 616;
  object-fit: cover;
}
.course-banner.admin-banner img {
  aspect-ratio: 2172 / 360;
}
.continue-strip {
  margin-top: 9px;
  padding: 10px 15px;
  border: 1px solid #5d9fcf;
  border-radius: 13px;
  background: rgba(230, 242, 252, 0.94);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.continue-strip > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 13px;
}
.continue-strip > div > span {
  color: var(--blue);
  font-size: 11px;
}
.continue-strip strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.continue-strip small {
  grid-column: 2;
  color: #607982;
  font-size: 10px;
}
.continue-strip button {
  flex-shrink: 0;
}
.path-summary-row {
  direction: rtl;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) 263px minmax(155px, 0.72fr);
  gap: 10px;
  margin: 9px 0 10px;
  align-items: stretch;
}
.path-summary-row > article {
  min-width: 0;
  min-height: 103px;
}
.path-summary-row .continue-strip {
  margin: 0;
  gap: 10px;
  padding: 9px 12px;
}
.path-summary-row .continue-strip > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.path-summary-row .continue-strip strong,
.path-summary-row .continue-strip small {
  width: 100%;
  grid-column: auto;
}
.path-summary-row .continue-strip button {
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 11px;
}
.completed-topics-card {
  background: #fff;
  border: 1px solid #95b9d9;
  border-radius: 13px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: center;
}
.completed-topics-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.45;
}
.completed-topics-card strong small {
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
}
.completed-topics-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.hero h2 {
  font-size: 28px;
  margin: 15px 0 7px;
}
.hero p {
  color: #c7e0f5;
  font-size: 12px;
}
.hero small {
  display: inline-block;
  margin-right: 17px;
  color: #b7d4ed;
}
.tag {
  font-size: 10px;
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 6px;
  background: #eef5fc;
  color: var(--blue);
  white-space: nowrap;
}
.tag.light {
  background: #ffffff14;
  border: 1px solid #ffffff24;
  color: #cfe5f7;
}
.hero-art {
  width: 230px;
  display: grid;
  place-items: center;
  position: relative;
  margin-left: 25px;
}
.compass {
  height: 174px;
  width: 174px;
  border: 1px solid #7ab1d746;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transform: rotate(-18deg);
  box-shadow:
    0 0 0 25px #8abddd08,
    0 0 0 26px #8abddd18;
}
.compass:before,
.compass:after {
  content: "";
  position: absolute;
  border: 1px solid #94c5e845;
  border-radius: 50%;
  inset: 17px;
}
.compass:after {
  inset: 33px;
  border-style: dashed;
}
.compass span {
  font-size: 148px;
  line-height: 1;
  color: #cfe8fa;
  text-shadow: 4px 6px 0 #142f4160;
}
.art-dot {
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background: #76b5e2;
}
.art-dot.one {
  left: 15px;
  top: 36px;
}
.art-dot.two {
  right: 10px;
  bottom: 19px;
  background: #5ba6da;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 23px 0;
}
.path-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.path-stats article {
  justify-content: center;
  text-align: center;
  padding: 13px 16px;
}
.image-progress-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 8px 0;
  min-width: 0;
  background: #fff;
  border: 1px solid #95b9d9;
  border-radius: 13px;
}
.image-progress-art {
  position: relative;
  width: 261px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 783 / 255;
  margin: 0 auto;
}
.image-progress-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-progress-muted {
  opacity: 0.2;
}
.image-progress-reveal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 calc(100% - var(--course-progress)));
}
.image-progress-reveal img {
  opacity: 1;
}
.image-progress-percent {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 1;
  min-width: 44px;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 57, 95, 0.86);
  font-weight: 700;
  line-height: 1.7;
  box-shadow: 0 2px 8px rgba(7, 57, 95, 0.16);
}
.stats.four {
  grid-template-columns: repeat(4, 1fr);
}
.stats article {
  background: #fff;
  border: 1px solid #95b9d9;
  border-radius: 13px;
  padding: 19px;
  display: flex;
  align-items: center;
  gap: 17px;
}
.stats strong {
  font-size: 25px;
  line-height: 1.5;
}
.stats strong small {
  font-weight: normal;
  color: var(--muted);
  font-size: 12px;
}
.stats p {
  margin: 3px 0 0;
  font-size: 10px;
  color: var(--muted);
}
.stat-icon {
  width: 45px;
  height: 45px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 28px;
}
.teal {
  color: var(--blue);
  background: #eaf4fb;
}
.gold-text {
  color: #226c9e;
  background: #eaf4fc;
}
.blue {
  color: #527996;
  background: #edf3f8;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  gap: 12px;
}
.journey-panel {
  width: 100%;
  padding: 18px;
  margin-bottom: 12px;
}
.path-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.path-action-card {
  min-width: 0;
  margin-bottom: 0;
  padding: 17px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.toolkit-link-card {
  align-items: stretch;
}
.toolkit-link-card button {
  margin-top: auto;
  width: 100%;
}
.path-card-icon {
  width: 54px;
  height: 54px;
  border: 1.5px solid #000063;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: transparent;
  flex: 0 0 auto;
}
.path-card-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.path-card-heading {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-bottom: 8px;
}
.path-card-heading h3 {
  margin: 0;
}
.ranking-card > .tag {
  align-self: center;
  margin-bottom: 4px;
}
.referral-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(300px, 1.45fr) minmax(220px, .9fr);
  gap: 18px;
  align-items: stretch;
  text-align: right;
}
.referral-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.referral-intro .path-card-heading {
  justify-content: flex-start;
}
.referral-card form {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(300px, 1.45fr) minmax(220px, .9fr);
  gap: 18px;
}
.referral-card label {
  font-size: 10px;
  text-align: center;
}
.referral-card input {
  margin-top: 3px;
  padding: 8px 10px;
  font-size: 11px;
}
.referral-card .eitaa-field {
  grid-column: auto;
}
.referral-card .invite-message-field {
  grid-column: 1;
  text-align: right;
}
.referral-card textarea {
  width: 100%;
  min-height: 190px;
  margin-top: 5px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.9;
  font: inherit;
}
.invite-tone {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
}
.invite-tone button {
  width: auto;
  min-width: 62px;
  padding: 6px 12px;
  font-size: 10px;
  background: var(--soft);
  color: var(--ink);
  border: 1px solid #95b9d9;
}
.invite-tone button.active {
  background: var(--blue);
  color: #fff;
  border-color: #000000;
}
.eitaa-invite-status {
  display: block;
  margin-top: 5px;
  color: var(--blue);
  font-size: 10px;
  line-height: 1.7;
}
.eitaa-invite-status[hidden] {
  display: none;
}
.referral-card button {
  padding: 8px 14px;
}
.referral-recipient-fields {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}
.referral-recipient-fields > button {
  width: 100%;
}
.ranking-card,
.toolkit-link-card {
  min-height: 230px;
  max-height: 300px;
}
.panel {
  background: #fff;
  border: 1px solid #95b9d9;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 12px;
}
.learners-table tbody tr.learner-completed-pending > td {
  background: #fffbed;
}
.learners-table tbody tr.learner-certificate-issued > td {
  background: #eaf4ff;
  color: #214665;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.section-title h2,
.section-title h3 {
  margin: 0;
}
.section-title + p {
  font-size: 11px;
  margin-top: 7px;
}
.journey {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px 9px;
  padding: 12px 0 8px;
  position: relative;
}
.station {
  background: transparent;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  gap: 5px;
  padding: 0;
  position: relative;
  align-items: center;
  justify-content: flex-start;
}
.station:after {
  content: "";
  position: absolute;
  height: 2px;
  background: #dfe9f2;
  width: 60%;
  right: 70%;
  top: 56px;
}
.station:nth-child(6n):after {
  display: none;
}
.station:nth-child(n + 7):nth-child(-n + 12) {
  transform: translateX(8px);
}
.station span {
  height: 112px;
  width: 112px;
  display: grid;
  place-items: center;
  border: 1px solid #b5cfe6;
  background: #f7faff;
  border-radius: 50%;
  font-size: 39px;
  position: relative;
  z-index: 1;
}
.station.done span {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 5px #eaf4fb;
}
.station.in-progress span {
  background: #eaf4fb;
  color: #226695;
  border-color: #9bc3e1;
  box-shadow: 0 0 0 4px #f2f8fc;
}
.station.in-progress small {
  color: #226695;
  font-weight: 700;
}
.station.not-started span,
.station.locked span {
  background: #f2f4f5;
  color: #88949a;
  border-color: #d4dcdf;
}
.station.not-started small,
.station.locked small {
  color: #88949a;
}
.station.future {
  opacity: 0.55;
}
.station.future span {
  border-style: dashed;
  background: #f4f6f6;
}
.station.has-image .station-visual {
  overflow: hidden;
  padding: 0;
  border-width: 4px;
  border-style: solid;
  background: #fff;
  box-shadow: none;
}
.station.has-image.done .station-visual {
  border-color: var(--blue);
}
.station.has-image.in-progress .station-visual {
  border-color: #9bc3e1;
}
.station.has-image.not-started .station-visual,
.station.has-image.locked .station-visual {
  border-color: #c7d0d3;
}
.station.has-image.future .station-visual {
  border-color: #cbd5d8;
  border-style: dashed;
}
.station.has-image .station-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.station small {
  font-size: 12px;
}
.station-caption {
  width: 100%;
  line-height: 1.65;
  color: #647983;
}
.station-caption b,
.station-caption em,
.station-caption i {
  display: block;
}
.station-caption b {
  color: var(--ink);
  font-size: 13px;
}
.station-caption em {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.station-caption i {
  color: #93a1a6;
  font-size: 9px;
  font-style: normal;
}
.legend {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: 13px;
  border-top: 1px solid #95b9d9;
  padding-top: 12px;
  color: var(--blue);
}
.legend .in-progress-key {
  color: #6da4ce;
}
.legend .not-started-key {
  color: #88949a;
}
.achievement {
  text-align: center;
  background: linear-gradient(130deg, #fff, #f5faff);
  padding: 18px 22px;
}
.medal {
  font-size: 53px;
  color: #357aaa;
  line-height: 1.4;
}
.achievement p {
  font-size: 11px;
  margin: 0;
}
.rank-row {
  display: flex;
  gap: 13px;
  font-size: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #d5dddd;
}
.rank-row small {
  margin-right: auto;
  color: var(--muted);
}
.rank-row.mine {
  color: var(--blue);
}
footer {
  text-align: center;
  color: #94a3ac;
  font-size: 10px;
  margin: 20px 0;
}
footer span {
  padding: 0 8px;
}
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.chapter-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chapter-card h3 {
  margin: 0;
}
.chapter-card p {
  font-size: 11px;
  margin: 0;
}
.chapter-card button {
  margin-top: auto;
}
.chapter-number {
  font-size: 25px;
  color: var(--blue);
}
.chapter-section {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
}
.chapter-section > h2 {
  font-size: 17px;
  margin-bottom: 10px;
}
.chapter-card.future {
  background: #f0f5fa;
  opacity: 0.75;
}
progress {
  width: 100%;
  height: 5px;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: #edf3f9;
}
progress::-webkit-progress-bar {
  background: #edf3f9;
}
progress::-webkit-progress-value {
  background: var(--blue);
}
.file-icon {
  display: inline-grid;
  place-items: center;
  width: 55px;
  height: 66px;
  background: #eef4f5;
  border: 1px solid #7da9b1;
  border-radius: 7px 7px 16px 7px;
  color: var(--blue);
  font-size: 12px;
  margin-bottom: 18px;
}
.file-card p {
  font-size: 11px;
}
.file-card button {
  width: 100%;
  margin-top: 9px;
}
.lesson-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.video-panel {
  overflow: hidden;
  border-radius: 15px;
  background: #113447;
}
video {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  background: #0a2636;
}
.video-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  padding: 5px 9px;
  color: #71818a;
  background: #edf2f3;
  border-top: 1px solid #99b5b9;
}
.video-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  margin: 0;
}
.video-controls select {
  margin: 0;
  width: 62px;
  min-height: 28px;
  padding: 2px 7px;
  border-color: #7999a1;
  border-radius: 7px;
  background: #f8fafa;
  color: #50636d;
  font-size: 10px;
}
.video-controls button {
  min-height: 28px;
  padding: 3px 9px;
  border-color: #7999a1;
  border-radius: 7px;
  background: #f8fafa;
  color: #50636d;
  font-size: 10px;
}
.resource-row,
.topic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #95b9d9;
}
.topic-progress-row {
  border: 1px solid transparent;
}
.topic-progress-row .topic-progress-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
}
.topic-progress-row .topic-progress-title b {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #0062a5;
  color: #fff;
  font-size: 11px;
}
.topic-progress-row small {
  font-size: 9px;
  white-space: nowrap;
}
.topic-progress-row.is-complete {
  border-color: #003395;
  background: #e2f0fb;
  color: #124c75;
  font-weight: 700;
}
.topic-progress-row.is-in-progress {
  border-color: #6fa5cd;
  background: #f0f6fc;
  color: #4c7290;
}
.topic-progress-row.is-not-started {
  border-color: #99abb5;
  background: #f3f5f6;
  color: #8b969c;
}
.topic-row {
  padding: 12px;
  width: 100%;
  margin-top: 12px;
}
.video-list-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.video-play-icon {
  color: currentColor;
  font-size: 15px;
  line-height: 1;
}
.video-list-item.is-playing {
  background: #fff1f1;
  border-color: #cf2121;
  color: #7c3030;
}
.video-list-item.is-playing .video-play-icon {
  color: #d52020;
}
.resource-row button {
  font-size: 11px;
  padding: 6px 12px;
}
.hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 14px;
}
.error-text {
  color: #b34141;
  font-size: 12px;
  margin-top: 12px;
}
.loading,
.empty {
  padding: 65px 25px;
  text-align: center;
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.form-grid .form-wide {
  grid-column: 1 / -1;
}
.ui-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-inline-end: 6px;
  color: currentColor;
  vertical-align: middle;
}
.ui-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-button .ui-icon,
.copy-button .ui-icon {
  margin: 0;
}
.entity-description textarea {
  min-height: 150px;
  line-height: 2;
}
label {
  display: block;
  font-size: 12px;
  margin-bottom: 17px;
}
input,
select,
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #87a5ad;
  background: #fff;
  border-radius: 8px;
  color: var(--ink);
  margin-top: 7px;
  outline: none;
  min-height: 44px;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #000000;
  box-shadow: 0 0 0 3px #0062a512;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  accent-color: var(--blue);
  margin: 0;
  flex-shrink: 0;
}
.answer {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #95b9d9;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
}
.answer:has(input:checked) {
  background: #eff6fc;
  border-color: #000079;
}
fieldset {
  border: 1px solid #95b9d9;
  padding: 20px;
  border-radius: 12px;
  margin: 18px 0;
}
legend {
  font-weight: bold;
  padding: 0 8px;
  font-size: 14px;
}
dialog {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 30px 100px #102d4140;
  width: min(760px, 94vw);
  max-height: 90vh;
  padding: 27px;
  color: var(--ink);
  background: #fff;
}
dialog::backdrop {
  background: #0a26377a;
  backdrop-filter: blur(4px);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-head h2 {
  margin: 0;
}
dialog.quiz-dialog[open] {
  display: flex;
  flex-direction: column;
  height: min(820px, 90vh);
  overflow: hidden;
}
.quiz-dialog .modal-head {
  flex: 0 0 auto;
}
.quiz-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}
.quiz-sticky {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 2px 14px;
  border-bottom: 1px solid #95b9d9;
}
.quiz-sticky p {
  margin: 0;
}
.quiz-countdown {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #b4232f;
  white-space: nowrap;
}
.quiz-countdown span {
  font-size: 12px;
}
.quiz-countdown strong {
  min-width: 74px;
  direction: ltr;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}
.quiz-questions {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 3px 8px 10px;
  scrollbar-gutter: stable;
}
.pdf-view {
  width: 100%;
  height: 65vh;
  border: 1px solid #95b9d9;
  border-radius: 10px;
}
.result {
  text-align: center;
  padding: 22px;
  border-radius: 12px;
  background: #fcf5ec;
  margin-bottom: 24px;
}
.result.success {
  background: #eaf7ef;
  animation: celebrate 0.5s;
}
.result strong {
  font-size: 45px;
  color: var(--blue);
}
.feedback {
  padding: 15px 0;
  border-bottom: 1px solid #95b9d9;
}
.feedback p {
  margin: 8px 0;
}
.feedback small {
  color: var(--muted);
}
.actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--navy);
  color: white;
  border-radius: 10px;
  padding: 14px 22px;
  box-shadow: 0 7px 30px #15334425;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  max-width: 90vw;
}
#toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
#toast.error {
  background: #944444;
}
.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-story {
  background: var(--navy);
  color: #fff;
  padding: 60px 15%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-story .brand {
  position: absolute;
  top: 50px;
  color: white;
}
.login-story .eyebrow {
  color: #9ec5e4;
}
.login-story h1 {
  font-size: 54px;
  margin-top: 15px;
  line-height: 1.6;
}
.login-story p {
  color: #b9d3ea;
  font-size: 13px;
  line-height: 2.2;
}
.login-story small {
  margin-top: 70px;
  color: #8bafd0;
}
.orbit {
  position: absolute;
  left: -120px;
  bottom: -90px;
  width: 400px;
  height: 400px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.orbit i {
  position: absolute;
  inset: 35px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
}
.orbit i:nth-child(2) {
  inset: 70px;
}
.orbit i:nth-child(3) {
  inset: 105px;
}
.orbit span {
  font-size: 180px;
  color: var(--gold);
  transform: rotate(25deg);
}
.login-card {
  max-width: 430px;
  width: 100%;
  margin: auto;
  padding: 45px;
}
.login-card h2 {
  font-size: 24px;
  margin: 20px 0 7px;
}
.login-card > .muted {
  font-size: 12px;
  margin-bottom: 30px;
}
.login-card form button {
  width: 100%;
  justify-content: space-between;
}
.login-card .hint {
  margin: 22px 0;
}
.admin-layout .nav-label {
  margin-top: 25px;
}
.admin-layout .nav-item {
  font-size: 12px;
  margin-bottom: 4px;
  padding: 8px 13px;
}
.admin-layout .sidebar-note {
  display: none;
}
.tabs {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 23px;
}
.tabs .selected {
  background: var(--blue);
  color: #fff;
}
.video-chapter-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(45px, 1fr);
  gap: 4px;
  margin-bottom: 13px;
}
.video-chapter-tabs button {
  min-width: 0;
  padding: 6px 4px;
  gap: 0;
  border-radius: 8px;
  font-size: 10px;
  white-space: nowrap;
}
body.portrait-mode .video-chapter-tabs {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 4px;
}
body.portrait-mode .video-chapter-tabs button {
  padding: 6px 2px;
  font-size: 8px;
}
.copy-button {
  min-width: 38px;
  padding-inline: 10px;
  color: #165f90;
  font-size: 18px;
  line-height: 1;
}
.table-wrap {
  overflow: auto;
  margin-top: 20px;
}
table {
  border-collapse: collapse;
  width: 100%;
  text-align: right;
  font-size: 12px;
}
th {
  color: var(--muted);
  font-weight: normal;
  background: #f6f9fc;
}
th,
td {
  padding: 13px;
  border-bottom: 1px solid #95b9d9;
  white-space: normal;
  min-width: 90px;
}
td button {
  font-size: 11px;
  padding: 6px 12px;
}
.user-progress-cell {
  min-width: 130px;
}
.user-progress {
  display: grid;
  grid-template-columns: 42px minmax(64px, 1fr);
  align-items: center;
  gap: 8px;
}
.user-progress strong {
  color: var(--blue);
  font-size: 13px;
  white-space: nowrap;
}
.user-progress progress {
  min-width: 64px;
  height: 7px;
}
.block {
  display: block;
}
.narrow {
  max-width: 560px;
}
code,
pre {
  direction: ltr;
  unicode-bidi: embed;
  font-family: Consolas, monospace;
  font-size: 11px;
}
pre {
  overflow: auto;
  max-height: 350px;
  background: #f4f7f8;
  border-radius: 9px;
  padding: 20px;
  text-align: left;
}
.question-edit {
  background: #fafcff;
}
@keyframes celebrate {
  from {
    transform: scale(0.93);
  }
  to {
    transform: scale(1);
  }
}
@media (min-width: 1500px) {
  #content {
    padding-top: 45px;
  }
  .hero {
    min-height: 280px;
  }
}
@media (max-width: 1150px) {
  .layout {
    grid-template-columns: 200px 1fr;
  }
  .sidebar {
    padding: 25px 15px;
  }
  #content {
    padding: 27px;
  }
  header {
    padding: 0 27px;
  }
  .chapter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-art {
    width: 180px;
    margin-left: 0;
  }
  .hero {
    padding: 28px;
  }
  .stats article {
    padding: 13px;
    gap: 9px;
  }
  .stats.four {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1.5fr 1fr;
  }
  .path-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .referral-card {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .referral-card form {
    grid-column: 1;
    grid-template-columns: minmax(260px, 1.35fr) minmax(210px, .85fr);
  }
  .journey {
    grid-template-columns: repeat(3, 1fr);
  }
  .station:nth-child(3n):after {
    display: none;
  }
  .station:nth-child(n + 7):nth-child(-n + 12) {
    transform: none;
  }
  .legend {
    gap: 12px;
  }
}
@media (max-width: 760px) {
  body {
    font-size: 13px;
  }
  .layout {
    display: block;
  }
  .sidebar {
    position: fixed;
    bottom: 0;
    top: auto;
    height: auto;
    z-index: 20;
    width: 100%;
    padding: 6px 8px;
    border-left: 0;
    border-top: 1px solid #95b9d9;
  }
  .sidebar > .brand,
  .nav-label,
  .sidebar-bottom {
    display: none;
  }
  .sidebar nav {
    display: flex;
    justify-content: space-around;
  }
  .nav-item {
    flex-direction: column;
    gap: 4px;
    padding: 7px 5px;
    margin: 0;
    font-size: 10px;
    width: auto;
    flex: 1;
  }
  .nav-item b {
    font-size: 23px;
  }
  .nav-item.active {
    border-radius: 9px;
  }
  .workspace {
    padding-bottom: 75px;
  }
  header {
    height: 62px;
    padding: 0 20px;
  }
  #content {
    padding: 24px 18px 15px;
  }
  .page-heading {
    align-items: flex-start;
  }
  .page-heading h1 {
    font-size: 24px;
  }
  .date {
    font-size: 9px;
    padding: 5px 8px;
  }
  .hero {
    padding: 25px;
    min-height: 243px;
  }
  .course-banner {
    border-radius: 12px;
    margin-bottom: 8px;
  }
  .continue-strip {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .continue-strip strong {
    white-space: normal;
  }
  .continue-strip button {
    width: 100%;
  }
  .path-summary-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(88px, 0.72fr);
    gap: 6px;
  }
  .path-summary-row > article {
    min-height: 101px;
  }
  .path-summary-row .continue-strip {
    padding: 7px;
  }
  .path-summary-row .continue-strip > div > span,
  .path-summary-row .continue-strip small,
  .completed-topics-card p {
    font-size: 8px;
  }
  .path-summary-row .continue-strip strong {
    font-size: 10px;
    line-height: 1.55;
    max-height: 31px;
  }
  .path-summary-row .continue-strip button {
    padding: 5px 7px;
    font-size: 9px;
  }
  .completed-topics-card {
    padding: 7px 4px;
  }
  .completed-topics-card strong {
    font-size: 18px;
  }
  .image-progress-art {
    width: 100%;
  }
  .hero h2 {
    font-size: 25px;
  }
  .hero-art {
    position: absolute;
    left: -40px;
    top: 40px;
    opacity: 0.25;
    width: 180px;
    pointer-events: none;
  }
  .hero > div:first-child {
    position: relative;
    z-index: 1;
  }
  .hero small {
    display: block;
    margin: 10px 0 0;
  }
  .stats {
    gap: 8px;
    margin: 16px 0;
  }
  .stats article {
    padding: 12px 6px;
    display: block;
    text-align: center;
  }
  .stat-icon {
    display: none;
  }
  .stats strong {
    font-size: 21px;
  }
  .stats strong small {
    font-size: 10px;
  }
  .stats p {
    font-size: 9px;
  }
  .dashboard-grid,
  .lesson-grid,
  .path-actions-grid {
    grid-template-columns: 1fr;
  }
  .referral-card {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .referral-card form {
    grid-column: 1;
    grid-template-columns: 1fr;
  }
  .referral-card .invite-message-field {
    grid-column: 1;
  }
  .panel {
    padding: 20px;
  }
  .journey {
    grid-template-columns: repeat(6, 1fr);
    gap: 23px 8px;
  }
  .station:nth-child(3n):after {
    display: block;
  }
  .station:nth-child(6n):after {
    display: none;
  }
  .station span {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  .station:after {
    top: 21px;
  }
  .station small {
    font-size: 8px;
  }
  .chapter-grid {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .login-layout {
    grid-template-columns: 1fr;
  }
  .login-story {
    min-height: 265px;
    padding: 28px;
    justify-content: flex-end;
  }
  .login-story .brand {
    top: 20px;
  }
  .login-story .brand strong {
    font-size: 23px;
  }
  .login-story .eyebrow,
  .login-story > p,
  .login-story > small {
    display: none;
  }
  .login-story h1 {
    font-size: 32px;
    margin: 55px 0 0;
  }
  .orbit {
    width: 300px;
    height: 300px;
    left: -50px;
    bottom: -130px;
  }
  .login-card {
    padding: 28px;
    max-width: 460px;
  }
  .login-card h2 {
    font-size: 22px;
  }
  .admin-layout .sidebar {
    overflow-x: auto;
  }
  .admin-layout .sidebar nav {
    min-width: 600px;
  }
  .admin-layout .nav-item {
    font-size: 9px;
    padding: 6px;
  }
  .admin-layout .page-heading .button {
    font-size: 10px;
    padding: 7px 10px;
  }
  .admin-layout .page-heading h1 {
    font-size: 22px;
  }
  .header-separator {
    margin: 0 8px;
  }
  #toast {
    bottom: 88px;
    width: max-content;
  }
  dialog {
    padding: 20px;
  }
  .section-title {
    align-items: center;
  }
  .table-wrap {
    padding: 9px;
  }
  .resource-row {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.journey {
  display: block;
  padding: 12px 5px 8px;
}
.journey-row {
  --journey-node-center: 56px;
  --journey-row-gap: 6px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  position: relative;
  margin-bottom: var(--journey-row-gap);
}
.journey-row:last-child {
  margin-bottom: 0;
}
.journey-row:nth-child(even) {
  direction: ltr;
}
.journey-row:nth-child(even) .station {
  direction: rtl;
}
.journey-row .station:nth-child(3n)::after {
  display: block;
}
.journey-row .station:last-child::after {
  display: none;
}
.journey-row:nth-child(even) .station::after {
  left: 70%;
  right: auto;
}
.journey-row:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--journey-node-center);
  bottom: calc(-1 * (var(--journey-node-center) + var(--journey-row-gap)));
  left: -10px;
  width: calc(10% + 10px);
  border-top: 2px solid #dfe9f2;
  border-bottom: 2px solid #dfe9f2;
  border-left: 2px solid #dfe9f2;
  border-radius: 18px 0 0 18px;
  transform: none;
}
.journey-row:nth-child(even):not(:last-child)::before {
  left: auto;
  right: -10px;
  width: calc(10% + 10px);
  border-left: 0;
  border-right: 2px solid #dfe9f2;
  border-radius: 0 18px 18px 0;
  transform: none;
}
@media (max-width: 1150px) and (min-width: 761px) {
  .journey-row {
    --journey-node-center: 38px;
    gap: 2px;
  }
  .journey-row .station span {
    width: 76px;
    height: 76px;
    font-size: 27px;
  }
  .journey-row .station small {
    font-size: 10px;
  }
  .journey-row .station::after {
    top: 38px;
  }
}
@media (max-width: 760px) {
  .journey-row {
    --journey-node-center: 26px;
    --journey-row-gap: 4px;
    gap: 3px;
  }
  .journey-row .station span {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .journey-row .station::after {
    top: 26px;
  }
  .station-caption b {
    font-size: 9px;
  }
  .station-caption em {
    font-size: 9px;
    line-height: 1.5;
  }
  .station-caption i {
    font-size: 7px;
  }
  .legend {
    flex-wrap: wrap;
    gap: 5px 13px;
    font-size: 10px;
  }
}
.chapter-accordion {
  display: grid;
  gap: 7px;
}
.toolkit-categories {
  display: grid;
  gap: 10px;
}
.workspace-switch {
  font-size: 12px;
  padding: 7px 13px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  header:has(.workspace-switch) .header-separator,
  header:has(.workspace-switch) .header-separator + .muted,
  header:has(.workspace-switch) .user-chip > span {
    display: none;
  }
  header:has(.workspace-switch) .user-chip {
    gap: 7px;
  }
  .workspace-switch {
    padding: 7px 10px;
    font-size: 11px;
  }
}
.toolkit-category {
  border: 1px solid #95b9d9;
  border-radius: 15px;
  background: white;
  overflow: hidden;
}
.toolkit-category > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  cursor: pointer;
}
.toolkit-category > summary::-webkit-details-marker {
  display: none;
}
.toolkit-category > summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -4px;
}
.toolkit-category > summary strong {
  font-size: 19px;
}
.toolkit-category > summary small {
  display: block;
  color: var(--muted);
}
.toolkit-category > summary .chapter-chevron {
  margin-right: auto;
}
.toolkit-category[open] > summary {
  border-bottom: 1px solid #95b9d9;
  background: #f1f7fc;
}
.toolkit-category[open] > summary .chapter-chevron {
  transform: rotate(180deg);
}
.toolkit-icon {
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #edf5fc;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  font-size: 25px;
}
.toolkit-chapters {
  padding: 2px 18px 14px;
}
.toolkit-chapter {
  padding: 13px 0;
  border-bottom: 1px solid #95b9d9;
}
.toolkit-chapter:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.toolkit-chapter h3 {
  font-size: 14px;
  margin-bottom: 10px;
}
.toolkit-chapter ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toolkit-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.toolkit-file-title {
  font-size: 13px;
}
.toolkit-file small {
  display: block;
  font-size: 11px;
  color: #657985;
}
.toolkit-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.toolkit-download {
  font-size: 12px;
  padding: 10px 14px;
}
.toolkit-empty {
  font-size: 12px;
  color: #657985;
  margin: 0;
}
@media (max-width: 760px) {
  .toolkit-category > summary {
    padding: 20px 16px;
    gap: 13px;
  }
  .toolkit-chapters {
    padding: 0 16px 18px;
  }
  .toolkit-file {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
  .toolkit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toolkit-download {
    padding: 10px 6px;
    font-size: 11px;
  }
}
.chapter-disclosure {
  background: #fff;
  border: 1px solid #95b9d9;
  border-radius: 13px;
  overflow: hidden;
}
.chapter-disclosure summary {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 86px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}
.chapter-disclosure summary::-webkit-details-marker {
  display: none;
}
.chapter-disclosure summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -4px;
}
.chapter-summary-text {
  flex: 1;
  min-width: 0;
}
.chapter-summary-text small {
  display: block;
  color: #657985;
  margin-top: 3px;
}
.chapter-title {
  font-size: 15px;
  color: #687e89;
  font-weight: 400;
}
.chapter-state {
  width: 39px;
  height: 39px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #87a5ad;
  border-radius: 50%;
  color: #687e89;
  background: #f6f8f8;
  font-size: 18px;
}
.chapter-status {
  font-size: 11px;
  color: #657985;
}
.chapter-chevron {
  color: #687e89;
  font-size: 22px;
  transition: transform 0.18s;
}
.chapter-disclosure[open] .chapter-chevron {
  transform: rotate(180deg);
}
.chapter-disclosure[open] summary {
  border-bottom: 1px solid #95b9d9;
}
.chapter-disclosure.is-complete {
  border-color: #0971b9;
}
.chapter-disclosure.is-complete summary {
  background: #f0f7fc;
}
.chapter-disclosure.is-complete .chapter-title {
  color: #12476d;
  font-weight: 700;
}
.chapter-disclosure.is-complete .chapter-state {
  background: #0062a5;
  border-color: #000000;
  color: #fff;
  font-weight: 700;
}
.chapter-disclosure.is-complete .chapter-status {
  color: #175d8e;
  font-weight: 700;
}
.chapter-disclosure.is-future {
  border-style: dashed;
  background: #f7f9fc;
}
.chapter-expanded {
  padding: 8px 22px 18px;
}
.chapter-intro,
.chapter-prerequisite {
  color: #657985;
  font-size: 12px;
  margin: 12px 0;
}
.chapter-prerequisite {
  color: #305f83;
}
.chapter-topic-list {
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}
.chapter-topic-list li + li {
  border-top: 1px solid #b9cdcd;
}
.chapter-topic {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  text-align: right;
  gap: 13px;
  background: transparent;
  color: #687e89;
  padding: 15px 12px;
  border-radius: 8px;
  min-height: 54px;
  font-weight: 400;
}
.chapter-topic:hover {
  background: #f3f7fb;
  transform: none;
}
.chapter-topic .topic-title {
  flex: 1;
  min-width: 0;
}
.chapter-topic .topic-state {
  font-size: 20px;
  flex-shrink: 0;
}
.chapter-topic small {
  font-size: 10px;
  font-weight: 400;
}
.chapter-topic.is-complete {
  color: #125987;
  font-weight: 700;
  background: #f4f9fd;
}
.chapter-topic.is-in-progress {
  color: #4c7290;
  background: #f0f6fc;
}
.chapter-topic.is-not-started {
  color: #8b969c;
  background: #f4f6f7;
}
.chapter-topic:disabled {
  opacity: 1;
  color: #71818b;
  cursor: not-allowed;
}
@media (max-width: 760px) {
  .chapter-disclosure summary {
    gap: 10px;
    padding: 15px 12px;
    flex-wrap: wrap;
  }
  .chapter-summary-text {
    flex-basis: calc(100% - 86px);
  }
  .chapter-title {
    font-size: 14px;
  }
  .chapter-status {
    order: 4;
    margin-right: 49px;
    margin-top: -6px;
  }
  .chapter-expanded {
    padding: 5px 12px 13px;
  }
  .chapter-topic {
    gap: 9px;
    padding: 14px 6px;
    flex-wrap: wrap;
  }
  .chapter-topic .topic-title {
    flex-basis: calc(100% - 42px);
  }
  .chapter-topic small {
    margin-right: 29px;
  }
}

/* Introduction is a separate, required course milestone. */
.aparat-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  background: #102b39;
}
.lesson-navigation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}
.quiz-entry {
  display: grid;
  gap: 5px;
}
.lesson-description-card {
  height: auto;
  min-height: 0;
}
.lesson-description-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  line-height: 2;
}
.quiz-entry > button {
  width: 100%;
  justify-content: center;
}
.quiz-passed {
  color: #176b55;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.quiz-answer-counts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 28px;
}
.quiz-answer-counts b {
  font-size: 1.35em;
}
.quiz-perfect {
  text-align: center;
  color: #167351;
  padding: 16px;
}
.lesson-heading {
  margin: 12px 0 24px;
  padding: 12px 18px;
  border: 1px solid #89b7b9;
  border-radius: 14px;
  background: #fafdfe;
  box-shadow: 0 2px 8px #163e5205;
}
.lesson-heading h1.lesson-breadcrumb {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  direction: rtl;
  line-height: 1.8;
}
.lesson-breadcrumb .breadcrumb-arrow {
  color: #0062a5;
  font-size: 0.8em;
}
.breadcrumb-part {
  unicode-bidi: isolate;
}
@media (max-width: 600px) {
  .lesson-heading h1.lesson-breadcrumb {
    font-size: 14px;
    gap: 4px 8px;
  }
}
button.lesson-next {
  color: #225f91;
  border: 2px solid #000055;
  background: #f3f8fd;
  width: 100%;
  justify-content: center;
}
button.lesson-next:hover {
  background: #dcecf9;
}
button.lesson-path {
  color: #167351;
  border: 2px solid #00003f;
  background: #f4f9fd;
  width: 100%;
  justify-content: center;
}
button.lesson-path:hover {
  background: #e0eef9;
}
.lesson-navigation button:focus-visible {
  outline: 3px solid #163e52;
  outline-offset: 3px;
}
.chapter-presentation {
  width: 100%;
  justify-content: center;
  border-color: #875700;
  color: #705d2e;
  background: #fffaf0;
}
.chapter-presentation-note {
  display: block;
  margin: -5px 5px 3px;
  color: #7b8790;
  font-size: 11px;
  text-align: center;
}
.chapter-quiz-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  margin: -1px 8px 5px;
}
.chapter-quiz-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #9fb1b9;
  border-radius: 9px;
  background: #f8fafb;
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
}
.chapter-quiz-status.passed {
  color: #174e77;
  font-weight: 700;
  border-color: #3585c3;
  background: #f3f8fd;
}
.chapter-quiz-status.pending {
  width: 100%;
  color: #6f797f;
  font-weight: 400;
  cursor: pointer;
}
.chapter-quiz-status.pending:hover {
  color: #214f79;
  border-color: #2d75b5;
  background: #f7faff;
}
.chapter-quiz-status b {
  font-size: 11px;
}
.video-controls[hidden],
#player[hidden] {
  display: none;
}

.station.is-introduction:not(.has-image) span,
.chapter-disclosure.is-introduction .chapter-state {
  background: #e5f0fa;
  border-color: #9abdd9;
  color: #225e8e;
}
.station.is-introduction small {
  color: #225e8e;
  font-weight: 700;
}
.chapter-disclosure.is-introduction,
.chapter-disclosure.is-introduction summary {
  background: #f5f9fd;
  border-color: #4b8dc1;
}
.chapter-disclosure.is-introduction .chapter-title {
  color: #456f93;
}
.station.is-introduction.done:not(.has-image) span,
.chapter-disclosure.is-introduction.is-complete .chapter-state {
  background: #225e8e;
  color: white;
}
.chapter-disclosure.is-introduction.is-complete .chapter-title {
  color: #20496d;
  font-weight: 800;
}
.introduction-notice {
  background: #edf5fc;
  border: 1px solid #4b8dc1;
  border-right: 4px solid #00004b;
  color: #2d587d;
  padding: 18px;
  border-radius: 12px;
  line-height: 2;
}
.certificate-quiz-notice {
  margin: 10px 0;
  padding: 9px 12px;
  border: 1px solid #8d9fa9;
  border-right: 3px solid #011b29;
  border-radius: 9px;
  background: #f4f6f7;
  color: #59656c;
  font-size: 11px;
  line-height: 1.55;
  white-space: nowrap;
}

/* User-selectable portrait presentation, also usable on wide screens. */
body.portrait-mode {
  overflow-x: hidden;
}
body.portrait-mode .layout {
  display: block;
  width: min(100%, 480px);
  min-height: 100vh;
  margin-inline: auto;
  background: #f3f7fb;
  box-shadow: 0 0 28px #07395f38;
}
body.portrait-mode .sidebar {
  position: fixed;
  inset: auto auto 0 50%;
  z-index: 30;
  width: min(100%, 480px);
  height: auto;
  padding: 6px 8px;
  transform: translateX(-50%);
  border: 0;
  border-top: 1px solid #95b9d9;
}
body.portrait-mode .sidebar > .brand,
body.portrait-mode .sidebar > .nav-label,
body.portrait-mode .sidebar > .sidebar-bottom {
  display: none;
}
body.portrait-mode .sidebar nav {
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
}
body.portrait-mode .nav-item {
  flex: 1 0 70px;
  flex-direction: column;
  gap: 3px;
  width: auto;
  margin: 0;
  padding: 6px 4px;
  font-size: 9px;
}
body.portrait-mode .nav-item b {
  font-size: 21px;
}
body.portrait-mode .nav-item.active {
  border-radius: 9px;
}
body.portrait-mode .workspace {
  padding-bottom: 72px;
}
body.portrait-mode header {
  height: 66px;
  padding: 0 12px;
}
body.portrait-mode .header-separator,
body.portrait-mode .header-separator + .muted,
body.portrait-mode .user-chip > span {
  display: none;
}
body.portrait-mode .header-context {
  max-width: 92px;
  font-size: 9px;
}
body.portrait-mode .user-chip {
  gap: 5px;
}
body.portrait-mode .workspace-switch {
  padding: 6px 8px;
  font-size: 9px;
}
body.portrait-mode .orientation-switch {
  gap: 3px;
  padding: 3px;
}
body.portrait-mode .orientation-button {
  width: 32px;
  height: 28px;
}
body.portrait-mode #content {
  max-width: none;
  min-height: calc(100vh - 125px);
  padding: 14px 12px;
}
body.portrait-mode #content:has(.course-banner) {
  padding-top: 12px;
}
body.portrait-mode .course-banner {
  margin-bottom: 8px;
  border-radius: 11px;
}
body.portrait-mode .continue-strip {
  align-items: stretch;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}
body.portrait-mode .continue-strip strong {
  white-space: normal;
}
body.portrait-mode .continue-strip button {
  width: 100%;
}
body.portrait-mode .path-summary-row {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(88px, 0.72fr);
  gap: 6px;
}
body.portrait-mode .path-summary-row > article {
  min-height: 101px;
}
body.portrait-mode .path-summary-row .continue-strip {
  padding: 7px;
}
body.portrait-mode .path-summary-row .continue-strip > div > span,
body.portrait-mode .path-summary-row .continue-strip small,
body.portrait-mode .completed-topics-card p {
  font-size: 8px;
}
body.portrait-mode .path-summary-row .continue-strip strong {
  font-size: 10px;
  line-height: 1.55;
  max-height: 31px;
}
body.portrait-mode .path-summary-row .continue-strip button {
  padding: 5px 7px;
  font-size: 9px;
}
body.portrait-mode .completed-topics-card {
  padding: 7px 4px;
}
body.portrait-mode .completed-topics-card .stat-icon {
  display: none;
}
body.portrait-mode .completed-topics-card strong {
  font-size: 18px;
}
body.portrait-mode .image-progress-art {
  width: 100%;
}
body.portrait-mode .stats {
  gap: 8px;
  margin: 10px 0;
}
body.portrait-mode .stats article {
  padding: 11px 7px;
}
body.portrait-mode .stat-icon {
  display: none;
}
body.portrait-mode .dashboard-grid,
body.portrait-mode .lesson-grid,
body.portrait-mode .path-actions-grid,
body.portrait-mode .chapter-grid,
body.portrait-mode .form-grid,
body.portrait-mode .stats.four {
  grid-template-columns: 1fr;
}
body.portrait-mode .panel {
  padding: 16px;
  margin-bottom: 12px;
}
body.portrait-mode .journey-panel {
  padding: 13px 8px;
}
body.portrait-mode .journey-row {
  gap: 3px;
  margin-bottom: 18px;
}
body.portrait-mode .journey-row .station span {
  width: 70px;
  height: 70px;
  font-size: 24px;
}
body.portrait-mode .journey-row .station::after {
  top: 35px;
}
body.portrait-mode .journey-row:not(:last-child)::before {
  top: 36px;
  bottom: -45px;
}
body.portrait-mode .station-caption b {
  font-size: 9px;
}
body.portrait-mode .station-caption em,
body.portrait-mode .station-caption i {
  font-size: 9px;
  line-height: 1.5;
}
body.portrait-mode .legend {
  flex-wrap: wrap;
  gap: 5px 12px;
  font-size: 10px;
}

/* Keep the portrait route outside chapter captions. */
body.portrait-mode .journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 6px;
  padding-inline: 0;
}
body.portrait-mode .journey-row,
body.portrait-mode .journey-row:nth-child(even) {
  display: contents;
}
body.portrait-mode .journey-row .station,
body.portrait-mode .journey-row:nth-child(even) .station {
  direction: rtl;
  min-width: 0;
}
body.portrait-mode .journey-row .station::after,
body.portrait-mode .journey-row .station:last-child::after,
body.portrait-mode .journey-row:nth-child(even) .station::after {
  display: none;
}
body.portrait-mode .journey-row .station::before {
  display: none;
}
body.portrait-mode .journey-row:nth-child(even) .station::before {
  right: auto;
  left: 0;
}
body.portrait-mode .journey-row:not(:last-child)::before {
  display: none;
}
body.portrait-mode .journey-row:last-child .station:last-child::before {
  display: none;
}
body.portrait-mode .station-caption {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-inline: 2px;
  background: #fff;
}
body.portrait-mode .journey-row .station span {
  width: 62px;
  height: 62px;
  font-size: 22px;
}
body.portrait-mode .station-caption em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
body.portrait-mode .station-caption.title-lines-3 em {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
body.portrait-mode .referral-card {
  grid-column: auto;
}
body.portrait-mode .referral-card form {
  grid-template-columns: 1fr;
}
body.portrait-mode .referral-card button {
  grid-column: auto;
}
body.portrait-mode .table-wrap {
  padding: 8px;
  overflow-x: auto;
}
body.portrait-mode .page-heading {
  align-items: flex-start;
}
body.portrait-mode .page-heading h1 {
  font-size: 22px;
}
body.portrait-mode dialog {
  width: min(94vw, 450px);
  padding: 18px;
}
body.portrait-mode footer {
  padding-inline: 12px;
}

.account-avatar{width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#e2eff9;color:#0062a5}.account-avatar img{width:100%;height:100%;object-fit:cover}.profile-photo{display:grid;gap:12px;margin-bottom:22px}.profile-photo img{width:90px;height:90px;object-fit:cover;border-radius:50%}.profile-photo img[hidden]{display:none}.certificate-issued td{background:#e5f4e9!important;color:#236239}.certificate-issued:hover td{background:#d7eedd!important}

.avatar-editor[hidden]{display:none}.avatar-editor{width:100%;text-align:center;background:#f3f7f8;border-radius:16px;padding:18px}.avatar-editor canvas{display:block;width:min(100%,280px);height:auto;aspect-ratio:1;border-radius:50%;outline:3px solid #0062a5;margin:16px auto;touch-action:none;cursor:grab;direction:ltr}.avatar-editor canvas:active{cursor:grabbing}.avatar-editor canvas:focus-visible{outline:4px solid #2f8bc7}.avatar-editor input[type=range]{display:block;max-width:300px;margin:12px auto;padding:0;accent-color:#0062a5}.avatar-editor p{font-size:13px;line-height:2}.avatar-editor button{margin-top:12px}


.learning-mode-panel{grid-column:1/-1}.learning-mode-actions{display:flex;gap:12px;margin:24px 0;flex-wrap:wrap}.learning-mode-actions button{flex:1;min-width:130px}.station.locked:not(:disabled){cursor:pointer}
.user-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px 0 4px}.user-pagination button{min-width:40px;padding:8px 11px}.user-pagination button.selected{background:#0062a5;color:#fff;border-color:#000000}.user-pagination button:disabled{opacity:.4;cursor:not-allowed}.user-pagination .page-gap{padding:0 4px}.user-pagination .hint{margin-inline-start:12px}.users-total{text-align:center;margin-top:12px}
.users-search{display:grid;gap:7px;margin:0 0 12px}.users-search label{font-weight:700;color:#173e4e}.users-search>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.users-search input{flex:1 1 280px;min-width:0;max-width:560px}.users-search button{flex:0 0 auto}.users-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.table-sort{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:4px 2px;border:0;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:pointer}.table-sort:hover{color:#0062a5}.sort-indicator{display:inline-flex;align-items:center;gap:2px;min-width:24px;font-size:11px;color:#0062a5}.sort-indicator b{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#0062a5;color:#fff;font-size:10px}.sort-indicator.muted{color:#93a5aa}
.learners-table .progress-column,.learners-table .user-progress-cell{min-width:230px}.learners-table .user-progress{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-items:stretch;gap:7px;min-width:205px}.learners-table .user-progress>div{display:grid;grid-template-columns:42px minmax(130px,1fr);align-items:center;gap:10px;width:100%}.learners-table .user-progress progress{display:block;width:100%;min-width:130px}.learners-table .user-progress small{display:block;grid-column:1/-1;font-size:10px;line-height:1.6;color:#71868e;white-space:nowrap;margin:0;padding:0}
.certificate-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}.certificate-columns .panel{min-width:0;margin:0}.certificate-columns table{font-size:11px}.instructor-requests-table td,.instructor-requests-table th{vertical-align:middle}.instructor-requests-table button{white-space:nowrap}@media(max-width:1050px){.certificate-columns{grid-template-columns:1fr}}
.dual-evaluation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;direction:rtl}.evaluation-pane{display:grid;align-content:start;gap:12px;padding:18px;border:1px solid #95b9d9;border-radius:14px;background:#f8fbfe}.evaluation-pane h3{margin:0 0 3px;color:#0a456f}.evaluation-pane label{margin:0}.save-evaluation{display:block;margin:16px auto 0;min-width:180px}.evaluation-approved{background:#e6f5ec;color:#24704a}.evaluation-rejected{background:#fbe9e9;color:#a43c3c}.evaluation-pending{background:#edf2f3;color:#61777e}.issued-label{display:inline-flex;color:#23724b;font-weight:800;font-size:11px}.dashboard-summary{max-width:none}.course-completers-table td,.course-completers-table th{vertical-align:middle}@media(max-width:700px){.dual-evaluation{grid-template-columns:1fr}}
.evaluation-stats{margin-bottom:14px}.certificate-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:150px}.certificate-actions .danger{background:#fff1f1!important;border-color:#b50000!important;color:#b4232f!important}.certificate-actions .danger:hover{background:#b4232f!important;color:#fff!important}.course-completers-table .table-sort{min-width:150px}
.certificate-actions .certificate-remove{width:34px;min-width:34px;height:34px;padding:0;border-radius:9px;font-size:22px;line-height:1;display:inline-grid;place-items:center}
#modal:has(.user-details){width:min(980px,95vw);padding:22px;overflow:auto}.user-details{display:grid;gap:14px}.user-course-overview{display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:center;gap:24px;padding:24px;border:1px solid #6f9fc9;border-radius:18px;background:linear-gradient(135deg,#f7fbfb,#edf5fc)}.detail-eyebrow{display:inline-block;color:#0062a5;font-size:12px;font-weight:800;margin-bottom:7px}.course-stat-copy h3{font-size:24px;margin:0 0 7px}.course-stat-copy p{margin:0 0 8px;color:#546d77}.course-stat-copy>strong,.course-stat-copy>small{display:block}.course-stat-copy>small{margin-top:5px;color:#6f8187}.overview-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.overview-stats span{display:grid;min-width:112px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #95b9db;color:#607780;font-size:11px}.overview-stats b{color:#0062a5;font-size:18px}.course-polygon{position:relative;width:280px;height:280px;margin:auto}.course-polygon svg{width:100%;height:100%;overflow:visible}.chapter-side{stroke:#d6e2e4;stroke-width:8;stroke-linecap:round}.chapter-side.is-complete{stroke:#0062a5}.chapter-labels text{font:700 9px sans-serif;fill:#789097;text-anchor:middle}.polygon-center{position:absolute;inset:79px;display:grid;place-content:center;text-align:center;border-radius:50%;background:#fff;box-shadow:0 8px 30px #12425217}.polygon-center span{font-size:12px;color:#527079}.polygon-center strong{font-size:18px;color:#073f55}.polygon-center small{font-size:10px;color:#0062a5;margin-top:3px}.detail-section{padding:18px;border:1px solid #95b9d9;border-radius:15px;background:#fff}.detail-section>h3{margin:0 0 14px;font-size:15px}.user-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.user-info-item{display:grid;gap:5px;padding:11px 12px;border-radius:11px;background:#f6f9fc;min-width:0}.user-info-item span{font-size:10px;color:#74888f}.user-info-item strong{font-size:12px;overflow-wrap:anywhere}.chapter-history{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chapter-history li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#f7f9fc;border-radius:10px}.chapter-history li span{display:grid;gap:2px;font-size:11px}.chapter-history li b{color:#0062a5}.chapter-history time{font-size:10px;color:#72878e;white-space:nowrap}.empty-detail{color:#788d93;margin:0}.access-section form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px}.access-section form label{margin:0}.access-section form button{margin-bottom:1px}@media(max-width:760px){#modal:has(.user-details){padding:15px}.user-course-overview{grid-template-columns:1fr;padding:16px}.course-polygon{width:250px;height:250px}.user-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-history{grid-template-columns:1fr}.access-section form{grid-template-columns:1fr}.overview-stats span{flex:1}}@media(max-width:440px){.user-info-grid{grid-template-columns:1fr}}

/* Compact three-card course actions. */
.path-actions-grid { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
.path-actions-grid > .panel { min-width: 0; min-height: 0; max-height: none; margin: 0; padding: 16px; }
.path-actions-grid .ranking-card { order: 1; }
.path-actions-grid .toolkit-link-card { order: 2; }
.path-actions-grid .referral-card { order: 3; grid-column: auto; display: flex; gap: 10px; }
.referral-intro { display: block; padding: 0; }
.referral-intro .path-card-heading { justify-content: center; margin-bottom: 6px; }
.referral-intro .muted { margin: 4px 0 8px; font-size: 10px; }
.referral-card .invite-tone { justify-content: center; }
.referral-card .invite-tone button { width: auto; min-width: 58px; min-height: 28px; padding: 4px 10px; font-size: 10px; }
.path-actions-grid .referral-card form { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin: 0; }
.referral-card label { display: flex; flex-direction: column; gap: 3px; margin: 0; text-align: right; }
.referral-card .invite-message-field { grid-column: 1; min-width: 0; }
.referral-card textarea { flex: none; height: 105px; min-height: 105px; max-height: 105px; overflow-y: auto; resize: none; margin: 0; padding: 8px; font-size: 11px; line-height: 1.8; box-sizing: border-box; }
.referral-recipient-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.referral-recipient-fields input { min-width: 0; width: 100%; margin: 0; height: 33px; padding: 6px 8px; box-sizing: border-box; }
.referral-recipient-fields .eitaa-field, .referral-recipient-fields > button, .referral-recipient-fields > small { grid-column: 1 / -1; }
.referral-recipient-fields > button { width: 100%; min-height: 33px; padding: 6px 10px; margin: 0; }
.eitaa-invite-status { margin: 0; line-height: 1.7; }
.path-actions-grid .toolkit-link-card button { margin-top: 16px; }
.path-actions-grid .rank-row { padding-block: 8px; }
@media(max-width:760px) { .path-actions-grid { grid-template-columns: 1fr; } }
body.portrait-mode .path-actions-grid { grid-template-columns: 1fr; }
/* Equal-height course cards with compact invitation fields. */
.path-actions-grid > .panel { height: 340px; box-sizing: border-box; overflow: hidden; padding: 12px; }
.path-actions-grid .path-card-heading { min-height: 40px; margin-bottom: 5px; gap: 8px; }
.path-actions-grid .path-card-icon { width: 40px; height: 40px; border-radius: 12px; }
.path-actions-grid .path-card-icon svg { width: 25px; height: 25px; }
.path-actions-grid .referral-card { gap: 5px; }
.referral-intro .muted { margin: 2px 0 4px; line-height: 1.5; font-size: 9px; }
.referral-card .invite-tone button { min-height: 25px; padding: 3px 10px; }
.path-actions-grid .referral-card form { flex: 1; min-height: 0; grid-template-rows: minmax(0,1fr) auto; gap: 5px; }
.referral-card label { gap: 2px; font-size: 9px; line-height: 1.4; }
.referral-card .invite-message-field { min-height: 0; }
.referral-card textarea { flex: 1; height: 70px; min-height: 42px; max-height: none; padding: 6px; line-height: 1.7; font-size: 10px; }
.referral-recipient-fields { gap: 5px; }
.referral-recipient-fields input { height: 29px; padding: 4px 7px; font-size: 10px; }
.referral-recipient-fields > button { min-height: 29px; padding: 4px 8px; font-size: 10px; }
.referral-recipient-fields .eitaa-invite-status { max-height: 42px; overflow-y: auto; font-size: 9px; }
.path-actions-grid .ranking-card #ranking { min-height: 0; flex: 1; overflow-y: auto; }
.path-actions-grid .toolkit-link-card { justify-content: space-between; }
.path-actions-grid .toolkit-link-card .muted { margin: 12px 0; line-height: 2; }
.path-actions-grid .toolkit-link-card button { margin-top: auto; }

/* Preserve the full progress artwork at every responsive width. */
.image-progress-card .image-progress-art,
body.portrait-mode .image-progress-card .image-progress-art {
  width: min(100%, 261px);
  height: auto;
  aspect-ratio: 783 / 255;
  flex-shrink: 0;
}
.image-progress-card .image-progress-art img { object-fit: contain; }/* Compact contact fields leave room for invitation text. */
.referral-card .invite-message-field { display:flex; flex-direction:column; gap:3px; }
.referral-card .invite-message-header { display:flex; align-items:center; justify-content:space-between; min-height:18px; }
.referral-card .invite-tone { display:flex; gap:10px; margin:0; }
.referral-card .invite-tone button { appearance:none; width:auto; min-width:0; min-height:0; height:auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#788995; font-size:10px; line-height:18px; }
.referral-card .invite-tone button.active { background:transparent; color:#0062a5; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.referral-card .referral-recipient-fields input { height:23px; min-height:23px; padding:2px 6px; }
.referral-card .referral-recipient-fields { gap:3px; }
.referral-card .referral-intro .path-card-heading { margin-bottom:0; }
.referral-card .invite-message-field textarea { flex:1; min-height:60px; overflow-y:auto; }
.referral-card .referral-recipient-fields .eitaa-invite-status { font-size:13px; line-height:1.65; font-weight:600; max-height:110px; overflow-y:auto; color:#164a61; }
.referral-card .eitaa-web-fallback { text-decoration:underline; color:#0062a5; }
/* Larger chapter circles and a tighter route in portrait view. */
body.portrait-mode .journey { gap:10px 3px; padding-block:6px; }
body.portrait-mode .journey-row .station span { width:min(80px,calc(100% - 8px)); height:auto; aspect-ratio:1; flex-shrink:0; font-size:26px; box-sizing:border-box; }
body.portrait-mode .journey-row .station { gap:4px; }
.users-search > div { flex-wrap:wrap; align-items:end; }
.users-search #users-search-input { flex:2; min-width:200px; }
.users-search .progress-filter { display:flex; flex-direction:column; gap:5px; margin:0; flex:1; min-width:175px; font-size:11px; }
.users-search .progress-filter select,.users-search .progress-filter input { margin:0; height:40px; min-width:0; }
.users-search .percent-filter { display:flex; gap:5px; }
.users-search .percent-filter select { flex:1; }
.users-search .percent-filter input { width:85px; }
.quick-list-search { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; font-size:11px; }
.quick-list-search input { margin:0; width:100%; height:40px; }
tr[hidden] { display:none !important; }

/* Transparent brand artwork keeps its full proportions on the sidebar. */
.brand:has(.brand-logo){justify-content:center;gap:0;width:100%}
.brand-logo{display:block;width:100%;max-width:216px;height:auto;object-fit:contain}
.login-story .brand-logo{max-width:300px}

/* Keep lesson downloads together and highlight the direct video download. */
.resource-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
#download-video{display:flex;width:max-content;max-width:100%;margin:12px auto 16px;align-items:center;justify-content:center;background:#f59e0b;border-color:#8d0000;color:#422006}
#download-video:hover{background:#fbbf24;border-color:#8d0000;color:#422006}
#download-video:focus-visible{outline:3px solid #fcd34d;outline-offset:3px}
@media(max-width:480px){.resource-row:has(.resource-actions){flex-wrap:wrap}.resource-row:has(.resource-actions)>span{flex:1 1 180px}.resource-actions{gap:6px}}
.lesson-navigation:has(#lesson-next){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%}
.lesson-navigation:has(#lesson-next)>button{width:100%;margin:0;min-width:0;white-space:normal}
.lesson-navigation:has(#lesson-next) #lesson-next{background:#0062a5;border-color:#000000;color:#fff}
.lesson-navigation:has(#lesson-next) #lesson-next:hover{background:#00548f}
.lesson-navigation:has(#lesson-next)>#lesson-path{background:#16834b;border-color:#000000;color:#fff}
.lesson-navigation:has(#lesson-next)>#lesson-path:hover{background:#116b3c}

.lesson-navigation:has(#lesson-next){grid-template-columns:repeat(3,minmax(0,1fr));flex-direction:row}
.lesson-navigation:has(#lesson-next)>#lesson-previous{background:#64748b;border-color:#000000;color:#fff;justify-content:center}
.lesson-navigation:has(#lesson-next)>#lesson-previous:hover{background:#475569}
.lesson-navigation:has(#lesson-next)>button:disabled{opacity:.5;cursor:not-allowed}
/* Compact spacing above the lesson player. */
#content:has(.lesson-grid)>#back{margin:0;padding:4px 0;min-height:0}
.lesson-heading{margin:6px 0 8px;padding:8px 14px}
.lesson-heading h1.lesson-breadcrumb{gap:4px 8px;line-height:1.6}
#content>.introduction-notice{margin:0 0 10px;padding:9px 12px;line-height:1.7}
.lesson-navigation:has(#lesson-next){grid-template-columns:repeat(2,minmax(0,1fr));margin:12px 0;gap:8px}
.lesson-navigation:has(#lesson-next):has(#lesson-previous){grid-template-columns:repeat(3,minmax(0,1fr))}
/* Soft, readable colors for lesson controls. */
.lesson-navigation:has(#lesson-next) #lesson-next{background:#eaf4ff;border-color:#3f8ddb;color:#185c96}
.lesson-navigation:has(#lesson-next) #lesson-next:hover{background:#dcecff;border-color:#0059c3;color:#185c96}
.lesson-navigation:has(#lesson-next)>#lesson-path{background:#edf8f1;border-color:#4dad75;color:#246c48}
.lesson-navigation:has(#lesson-next)>#lesson-path:hover{background:#dff1e6;border-color:#008131;color:#246c48}
.lesson-navigation:has(#lesson-next)>#lesson-previous{background:#f1f3f6;border-color:#7d91a9;color:#566274}
.lesson-navigation:has(#lesson-next)>#lesson-previous:hover{background:#e6eaf0;border-color:#334d71;color:#566274}
#download-video{background:#fff2dc;border-color:#db8100;color:#8a510b}
#download-video:hover{background:#ffe7bf;border-color:#b73900;color:#8a510b}
.lesson-navigation:has(#lesson-next)>#lesson-previous{order:-1}
.lesson-navigation:has(#lesson-next)>#lesson-path{order:0}
.lesson-navigation:has(#lesson-next) #lesson-next{order:1}
/* Matching widths for one receive action and the view/download pair. */
.resource-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:200px;max-width:100%;gap:6px}
.resource-actions>button{width:100%;min-width:0;padding:8px 10px;gap:4px;justify-content:center}
.resource-actions>button:only-child{grid-column:1/-1}
.resource-actions .ui-icon{margin:0;flex-shrink:0}
.dashboard-main-stats{margin-bottom:18px}
.participation-panel{margin-bottom:18px;background:#fff}
.dashboard-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dashboard-panel-heading h2,.dashboard-content-panel h2{font-size:18px;margin:0}
.dashboard-live-state{font-size:11px;color:#58748c;background:#edf6ff;border-radius:20px;padding:5px 10px}
.participation-layout{display:flex;justify-content:center;align-items:center;gap:48px;padding:24px 0 14px}
.participation-ring{position:relative;width:240px;height:240px;flex-shrink:0}
.participation-ring svg{display:block;width:100%;height:100%}
.participation-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:30px;text-align:center}
.participation-center strong{font-size:38px;color:#0062a5;line-height:1.2}
.participation-center span{font-size:13px;color:#49657c}
.participation-details{display:flex;flex-direction:column;gap:14px}
.participation-details>div{display:flex;align-items:center;gap:12px}
.participation-details b{font-size:26px;color:#164969;min-width:60px}
.participation-details span,.participation-details p{font-size:13px;color:#58748c}
.participation-details p{margin:0;padding:10px 12px;border-radius:9px;background:#edf8f1}
.participation-details strong{color:#246c48}
.participation-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:12px;color:#49657c}
.participation-legend>span{display:inline-flex;align-items:center;gap:6px}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-dot.blue{background:#0062a5}.legend-dot.green{background:#26a269}.legend-dot.neutral{background:#edf1f5;border:1px solid #879fb9}
.dashboard-count-note{font-size:11px;text-align:center;color:#7990a5;margin:12px 0 0}
.dashboard-content-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px;background:#f6faff;border:1px solid #a9c9e9;border-radius:12px;overflow:hidden}
.dashboard-content-strip>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 10px;text-align:center;border-left:1px solid #a9c9e9}
.dashboard-content-strip>div:last-child{border-left:0}
.dashboard-content-strip strong{font-size:23px;color:#164969}.dashboard-content-strip strong small{font-size:12px;font-weight:400}
.dashboard-content-strip span{font-size:12px;color:#6a8399}
@media(max-width:650px){.participation-layout{flex-direction:column;gap:20px;padding-top:18px}.participation-details{width:100%;align-items:center}.dashboard-content-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-content-strip>div{border-bottom:1px solid #a9c9e9}.dashboard-content-strip>div:nth-child(even){border-left:0}.dashboard-content-strip>div:nth-last-child(-n+2){border-bottom:0}.participation-legend{gap:10px}}

/* Square category shortcuts in the course toolkit card. */
.path-actions-grid .toolkit-link-card{justify-content:flex-start;}
.tool-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;flex:1;align-content:center;width:100%;}
.path-actions-grid .toolkit-link-card .tool-shortcut{aspect-ratio:1;width:100%;margin:0;padding:12px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #89b7e1;border-radius:16px;background:#f0f7ff;color:#0062a5;box-shadow:none;}
.path-actions-grid .toolkit-link-card .tool-presentations{background:#fff4ed;border-color:#e18d59;color:#bf6438;}
.tool-shortcut svg{width:62px;height:62px;max-width:55%;flex-shrink:0;}
.tool-shortcut strong{font-size:15px;}.tool-shortcut span{font-size:10px;opacity:.8;}
.tool-shortcut:hover{filter:brightness(.98);}.tool-shortcut:focus-visible{outline:2px solid #0062a5;outline-offset:3px;}
#toolkit-back{margin-bottom:12px;}

/* Responsive file tiles for both toolkit categories. */
.toolkit-file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px;}
.toolkit-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:20px 14px;border:1px solid #8db5db;border-radius:15px;background:#f8fbff;min-width:0;}
.toolkit-tile h3{margin:0;font-size:14px;line-height:1.8;overflow-wrap:anywhere;}
.toolkit-tile-chapter{font-size:10px;line-height:1.7;color:#71859a;}
.toolkit-tile-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:#e6f2ff;color:#0062a5;}
.presentation-tile .toolkit-tile-icon{background:#fff0e6;color:#bf6438;}
.toolkit-tile-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.toolkit-tile-note{font-size:10px;line-height:1.8;color:#71859a;margin:0;}
.toolkit-tile .toolkit-actions{margin-top:auto;padding-top:6px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.toolkit-tile .toolkit-actions button{flex:1;min-width:100px;padding:8px;}
@media(max-width:900px){.toolkit-file-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:500px){.toolkit-file-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;}.toolkit-tile{padding:14px 8px;gap:8px;}.toolkit-tile h3{font-size:12px;}.toolkit-tile .toolkit-actions button{min-width:0;width:100%;flex-basis:100%;font-size:10px;}}
@media(max-width:330px){.toolkit-file-grid{grid-template-columns:1fr;}}

/* Centered toolkit headings and a subtle light frame reveal. */
.toolkit-category{position:relative;overflow:visible;isolation:isolate;}
.toolkit-category>summary{position:relative;justify-content:center;text-align:center;background:transparent;min-height:78px;gap:10px;z-index:2;border-radius:14px;}
.toolkit-category>summary>span:nth-child(2){text-align:center;background:#fff;padding:0 14px;z-index:2;}
.toolkit-category>summary .toolkit-icon{position:absolute;inset-inline-start:calc(50% - 132px);}
.toolkit-category>summary .chapter-chevron{position:absolute;inset-inline-end:18px;}
.toolkit-category[open]>summary{border-bottom:0;background:transparent;}
.toolkit-light-frame{position:absolute;inset:39px 0 0;width:100%;height:calc(100% - 39px);overflow:visible;pointer-events:none;z-index:1;opacity:0;}
.toolkit-light-frame path{fill:none;stroke:#6eb9ef;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 3px #6eb9ef);}
.toolkit-category[open]>.toolkit-light-frame{opacity:1;}
.toolkit-category[open]>.toolkit-light-frame path{animation:toolkit-trace .85s cubic-bezier(.25,.6,.3,1) forwards;}
.toolkit-category[open]>.toolkit-file-grid{animation:toolkit-reveal .4s ease-out both;position:relative;z-index:0;padding-top:12px;}
.toolkit-category .toolkit-file-title,.toolkit-category h3,.toolkit-category .toolkit-tile-note{text-align:center;}
@keyframes toolkit-trace{from{stroke-dashoffset:100;opacity:.3;}to{stroke-dashoffset:0;opacity:1;}}
@keyframes toolkit-reveal{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.toolkit-category[open]>.toolkit-file-grid,.toolkit-category[open]>.toolkit-light-frame path{animation:none;}.toolkit-category[open]>.toolkit-light-frame path{stroke-dashoffset:0;}}

/* Keep learning mode within the profile column. */
.account-layout{align-items:start;}
.account-primary-column,.account-secondary-column{min-width:0;}
.account-layout .learning-mode-panel{grid-column:auto;text-align:center;padding:20px;}
.learning-mode-heading{border:1px solid #95bde5;border-radius:12px;background:#f6faff;padding:14px 12px;}
.learning-mode-heading h2{margin:0 0 8px;text-align:center;font-size:18px;}
.learning-mode-heading .learning-mode-subtitle{margin:0;text-align:center;font-size:13px;}
.learning-mode-subtitle strong{display:inline-block;padding:3px 10px;border-radius:7px;background:#eaf3ff;color:#0062a5;}
.learning-mode-description{line-height:2;text-align:center;margin:14px 0;font-size:12px;}
.learning-mode-panel #change-learning-mode{display:block;margin:0 auto;}

/* Both opening and closing are coordinated by the drawer controller. */
.toolkit-category[open]>.toolkit-file-grid,.toolkit-category[open]>.toolkit-light-frame path{animation:none;}
.toolkit-category[open]>.toolkit-light-frame path{stroke-dashoffset:0;}

.toolkit-light-frame path{vector-effect:none;}

/* Keep category cards near the heading with their access explanations. */
.tool-shortcuts{align-content:start;padding-top:12px;gap:12px;}
.tool-shortcut-item{min-width:0;display:flex;flex-direction:column;gap:10px;}
.tool-shortcut-note{margin:0;text-align:center;font-size:10.5px;line-height:1.9;color:#5d7890;}
@media(max-width:500px){.tool-shortcut-note{font-size:11px;}}

/* One notes box per chapter, with indented topic resources. */
.notes-chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
.notes-chapter-box{min-width:0;border:1px solid #87b5e1;border-radius:14px;background:#f8fbff;padding:16px;}
.notes-chapter-box>h3{margin:0 0 14px;line-height:1.9;text-align:center;font-size:14px;}
.notes-file-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #a5c3e1;font-size:12px;}
.notes-file-row:last-child{border-bottom:0;}.notes-file-row>span{min-width:0;line-height:1.9;text-align:right;}
.notes-file-row button{flex-shrink:0;font-size:10px;padding:8px 10px;}
.notes-full-file{background:#eaf4ff;border-radius:10px;padding:10px;border:1px solid #85b9ed;}
.notes-full-label{display:block;color:#0062a5;font-size:11px;}
.notes-topic-list{margin-inline-start:20px;padding-inline-start:12px;border-inline-start:2px solid #59a5e7;margin-top:12px;}
.notes-missing-full{margin:0;font-size:11px;line-height:1.8;color:#8391a0;text-align:center;}
.path-actions-grid .toolkit-link-card .tool-shortcut{min-height:0;flex:none;padding:10px 6px;gap:6px;}
.tool-shortcut svg{width:50px;height:50px;}.tool-shortcut strong,.tool-shortcut span{line-height:1.5;}
@media(max-width:650px){.notes-chapter-grid{grid-template-columns:1fr;}.notes-topic-list{margin-inline-start:14px;}}
@media(max-width:380px){.notes-file-row{flex-wrap:wrap;}.notes-file-row button{margin-inline-start:auto;}}
/* Equal chapter tiles; scroll only the topic list inside each tile. */
.notes-chapter-grid{align-items:stretch;}
.notes-chapter-box{height:400px;display:flex;flex-direction:column;overflow:hidden;}
.notes-chapter-box>h3{min-height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.notes-full-list{flex-shrink:0;max-height:135px;overflow-y:auto;}
.notes-topic-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#95bee0 #eef5fc;padding-inline-end:6px;}
.notes-topic-list::-webkit-scrollbar{width:5px;}.notes-topic-list::-webkit-scrollbar-thumb{background:#95bee0;border-radius:4px;}

/* Portrait is a narrow site shell even when the browser viewport is wide. */
body.portrait-mode .toolkit-file-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;}
body.portrait-mode .toolkit-tile{padding:16px 10px;gap:8px;}
body.portrait-mode .toolkit-tile h3{font-size:12px;}
body.portrait-mode .toolkit-tile .toolkit-actions button{min-width:0;flex-basis:100%;font-size:10px;}
body.portrait-mode .notes-chapter-box{padding:10px;}
body.portrait-mode .notes-chapter-box>h3{font-size:11px;min-height:82px;line-height:1.8;}
body.portrait-mode .notes-file-row{flex-direction:column;align-items:stretch;gap:5px;font-size:10px;}
body.portrait-mode .notes-file-row>span{text-align:center;}
body.portrait-mode .notes-file-row button{width:100%;margin:0;font-size:9px;padding:7px 4px;}
body.portrait-mode .notes-topic-list{margin-inline-start:6px;padding-inline-start:6px;}
@media(max-width:650px){.toolkit-file-grid,.notes-chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.notes-chapter-box{padding:10px;}.notes-chapter-box>h3{font-size:11px;min-height:82px;line-height:1.8;}.notes-file-row{flex-direction:column;align-items:stretch;gap:5px;font-size:10px;}.notes-file-row>span{text-align:center;}.notes-file-row button{width:100%;margin:0;font-size:9px;padding:7px 4px;}.notes-topic-list{margin-inline-start:6px;padding-inline-start:6px;}}
/* Mobile notes use full-width chapter lists and a single page scroll. */
body.portrait-mode .notes-chapter-grid{grid-template-columns:1fr;}
body.portrait-mode .notes-chapter-box{height:auto;overflow:visible;padding:14px;}
body.portrait-mode .notes-chapter-box>h3{min-height:0;margin-bottom:12px;font-size:12px;}
body.portrait-mode .notes-full-list{max-height:none;overflow:visible;}
body.portrait-mode .notes-topic-list{overflow:visible;max-height:none;margin-inline-start:0;padding-inline-start:0;border-inline-start:0;flex:none;}
body.portrait-mode .notes-file-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;font-size:11px;gap:8px;}
body.portrait-mode .notes-file-row>span{text-align:right;overflow-wrap:anywhere;}
body.portrait-mode .notes-file-row button{width:92px;white-space:nowrap;}
@media(max-width:650px){.notes-chapter-grid{grid-template-columns:1fr;}.notes-chapter-box{height:auto;overflow:visible;padding:14px;}.notes-chapter-box>h3{min-height:0;margin-bottom:12px;font-size:12px;}.notes-full-list{max-height:none;overflow:visible;}.notes-topic-list{overflow:visible;max-height:none;margin-inline-start:0;padding-inline-start:0;border-inline-start:0;flex:none;}.notes-file-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;font-size:11px;gap:8px;}.notes-file-row>span{text-align:right;overflow-wrap:anywhere;}.notes-file-row button{width:92px;white-space:nowrap;}}


/* Disabled control wrappers receive pointer events consistently across browsers. */
.disabled-tooltip-target{display:inline-flex;min-width:0}
.disabled-tooltip-target>button{width:100%;margin:0}
.disabled-tooltip-target:has(>button:disabled){cursor:not-allowed}
.disabled-tooltip-target>button:disabled{pointer-events:none}
.lesson-navigation:has(#lesson-next)>.lesson-next-target{order:1;display:flex;min-width:0;width:100%}
.lesson-next-target>button{min-width:0;white-space:normal}
.resource-actions>.disabled-tooltip-target{grid-column:1/-1;width:100%}
.resource-actions>.disabled-tooltip-target>button{justify-content:center;padding:8px 10px;gap:4px}
#disabled-control-tooltip{position:fixed;z-index:2147483647;max-width:min(340px,calc(100vw - 24px));padding:6px 10px;border-radius:6px;background:#20394d;color:#fff;font-size:11px;line-height:1.7;box-shadow:0 3px 12px #07395f26;pointer-events:none;direction:rtl;text-align:right}
#disabled-control-tooltip[hidden]{display:none}

/* Course sections: collapsed groups with independent chapter disclosures. */
.chapter-section.section-disclosure { padding: 0; }
.section-disclosure > .section-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; list-style:none; cursor:pointer; color:var(--ink); font-size:17px; font-weight:700; border-radius:14px; }
.section-disclosure > .section-summary::-webkit-details-marker { display:none; }
.section-disclosure > .section-summary::marker { content:""; }
.section-disclosure > .section-summary:hover { background:#f3f8fd; }
.section-disclosure > .section-summary:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; }
.section-chevron { color:var(--blue); transition:transform .18s ease; }
.section-disclosure[open] > .section-summary .section-chevron { transform:rotate(180deg); }
.section-expanded { padding:0 14px 14px; }
.section-full-title { font-size:14px; line-height:1.9; margin:0 0 12px; padding-top:6px; }
@media(max-width:600px) { .section-disclosure > .section-summary { padding:15px 14px; font-size:15px; } .section-expanded { padding:0 9px 9px; } }
@media(prefers-reduced-motion:reduce) { .section-chevron { transition:none; } }

.section-disclosure > .section-summary { display:grid; grid-template-columns:20px minmax(0,1fr) 20px; text-align:center; line-height:1.9; }
.section-disclosure > .section-summary::before { content:""; }
.section-full-title { text-align:center; }
.chapter-section.section-first { background:#fff2f2; border-color:#efb7b7; }
.chapter-section.section-second { background:#eef9f0; border-color:#aed8b8; }
.section-first > .section-summary { color:#a51d2d; }
.section-second > .section-summary { color:#176d39; }
.section-first > .section-summary:hover { background:#ffe8e8; }
.section-second > .section-summary:hover { background:#e2f3e7; }
.section-first > .section-summary .section-chevron { color:#a51d2d; }
.section-second > .section-summary .section-chevron { color:#176d39; }

/* Match each chapter's journey illustration and section-colored number strip. */
.chapter-disclosure.has-chapter-art > summary { padding:0 0 0 14px; min-height:108px; gap:12px; }
.chapter-list-visual { display:flex; align-items:center; align-self:stretch; flex:0 0 126px; gap:8px; padding-inline-start:8px; }
.chapter-list-visual img { display:block; width:88px; height:88px; flex-shrink:0; object-fit:cover; border-radius:50%; border:1px solid #95b7c9; }
.chapter-number-strip { display:grid; place-items:center; align-self:stretch; width:30px; flex-shrink:0; background:#edf4fb; color:#687e89; font-size:20px; }
.section-first .chapter-number-strip { background:#ffe1e1; }
.section-second .chapter-number-strip { background:#dff1e4; }
.has-chapter-art .chapter-summary-text { padding-block:12px; }
@media(max-width:760px) {
  .chapter-disclosure.has-chapter-art > summary { display:grid; grid-template-columns:90px minmax(0,1fr) 22px; grid-template-areas:"visual text chevron" "visual status chevron"; gap:0 9px; padding-inline-end:8px; min-height:104px; }
  .chapter-list-visual { grid-area:visual; gap:6px; padding-inline-start:6px; }
  .chapter-list-visual img { width:60px; height:60px; }
  .chapter-number-strip { width:24px; font-size:18px; }
  .has-chapter-art .chapter-summary-text { grid-area:text; padding:10px 0 2px; }
  .has-chapter-art .chapter-status { grid-area:status; margin:0; padding-bottom:10px; }
  .has-chapter-art .chapter-chevron { grid-area:chevron; }
}

body.portrait-mode .chapter-disclosure.has-chapter-art > summary { display:grid; grid-template-columns:90px minmax(0,1fr) 22px; grid-template-areas:"visual text chevron" "visual status chevron"; gap:0 9px; padding-inline-end:8px; min-height:104px; }
body.portrait-mode .chapter-list-visual { grid-area:visual; gap:6px; padding-inline-start:6px; }
body.portrait-mode .chapter-list-visual img { width:60px; height:60px; }
body.portrait-mode .chapter-number-strip { width:24px; font-size:18px; }
body.portrait-mode .has-chapter-art .chapter-summary-text { grid-area:text; padding:10px 0 2px; }
body.portrait-mode .has-chapter-art .chapter-status { grid-area:status; margin:0; padding-bottom:10px; }
body.portrait-mode .has-chapter-art .chapter-chevron { grid-area:chevron; }

/* A dedicated wide reading area for PDF lesson notes. */
dialog:has(> .pdf-view), body.portrait-mode dialog:has(> .pdf-view) { width:min(1280px,96vw); max-width:calc(100vw - 16px); height:92vh; max-height:92vh; padding:18px; box-sizing:border-box; }
dialog[open]:has(> .pdf-view) { display:flex; flex-direction:column; gap:12px; }
dialog:has(> .pdf-view) .modal-head { margin-bottom:0; flex-shrink:0; }
dialog:has(> .pdf-view) .pdf-view { flex:1; min-height:0; height:auto; }
dialog:has(> .pdf-view) > a { align-self:flex-start; flex-shrink:0; }
@media(max-width:600px) { dialog:has(> .pdf-view), body.portrait-mode dialog:has(> .pdf-view) { padding:10px; gap:8px; } }

/* Outside the lesson card, sharing its full width and original image ratio. */
.lesson-banner{width:100%;max-width:1260px;margin:0 auto;aspect-ratio:2170/237;overflow:hidden;border-radius:14px;border:0;padding:0;background:transparent}
.lesson-banner img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.006);border:0;padding:0}
body.portrait-mode .lesson-banner{max-width:none}
@media(max-width:600px){.lesson-banner{margin:0 auto;border-radius:10px}}

/* Stack lesson sections in reading order on phones and portrait view. */
@media (max-width:760px) {

.lesson-grid > .lesson-main,
.lesson-grid > .lesson-sidebar {display:contents}
.lesson-grid > .lesson-sidebar > .lesson-description-card {order:1}
.lesson-grid > .lesson-main > .video-panel {order:2}
.lesson-grid > .lesson-main > .lesson-navigation {order:3}
.lesson-grid > .lesson-main > #video-status {order:4}
.lesson-grid > .lesson-main > #download-video {order:5}
.lesson-grid > .lesson-sidebar > .lesson-topic-videos {order:6}
.lesson-grid > .lesson-main > .lesson-resources {order:7}

}

body.portrait-mode .lesson-grid > .lesson-main,
body.portrait-mode .lesson-grid > .lesson-sidebar {display:contents}
body.portrait-mode .lesson-grid > .lesson-sidebar > .lesson-description-card {order:1}
body.portrait-mode .lesson-grid > .lesson-main > .video-panel {order:2}
body.portrait-mode .lesson-grid > .lesson-main > .lesson-navigation {order:3}
body.portrait-mode .lesson-grid > .lesson-main > #video-status {order:4}
body.portrait-mode .lesson-grid > .lesson-main > #download-video {order:5}
body.portrait-mode .lesson-grid > .lesson-sidebar > .lesson-topic-videos {order:6}
body.portrait-mode .lesson-grid > .lesson-main > .lesson-resources {order:7}

.lesson-topic-quizzes{border-top:1px solid #81b1d9;margin-top:16px;padding-top:12px}.lesson-topic-quizzes h4{margin:0 0 12px}.lesson-quiz-row{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.lesson-quiz-row .disabled-tooltip-target,.lesson-quiz-row button{width:100%}

/* Scoped presentation of the lesson's videos and quizzes. */
.lesson-topic-videos{padding:16px;display:flex;flex-direction:column;gap:16px}
.lesson-topic-videos .lesson-videos-group,.lesson-topic-videos .lesson-topic-quizzes{border:1px solid #81b1d9;border-radius:14px;background:#f7fbff;padding:14px;margin:0;min-width:0}
.lesson-topic-videos .lesson-topic-quizzes{background:#f5faf8;border-color:#85b99f}
.lesson-topic-videos .lesson-section-title{text-align:center;font-size:16px;margin:0 0 16px;padding:10px 8px;border:1px solid #71a9d1;border-radius:10px;background:#eaf4fc;color:#164e70}
.lesson-topic-quizzes .lesson-section-title{background:#eaf5ef;border-color:#71b58d;color:#246349}
.lesson-topic-videos .video-list-label{justify-content:center;text-align:center;width:100%;line-height:1.9}
.lesson-topic-videos .video-list-item{justify-content:center;text-align:center;border-radius:10px}
.lesson-topic-videos .hint{text-align:center;line-height:1.9;margin-bottom:0}
.lesson-topic-videos .lesson-quiz-row{padding:12px;border:1px solid #89b59f;border-radius:11px;background:#fff;gap:12px;margin:0 0 12px;text-align:center}
.lesson-topic-videos .lesson-quiz-row:last-child{margin-bottom:0}
.lesson-quiz-heading{line-height:1.9;overflow-wrap:anywhere}.lesson-quiz-heading strong{margin-inline-end:8px}
.lesson-quiz-heading strong{color:#1e4c63;font-size:14px}
.lesson-quiz-topics{font-size:12px;color:#557283}
.lesson-quiz-status{font-size:12px;line-height:1.9;color:#637783}
.lesson-quiz-row.is-passed .lesson-quiz-status{color:#247049;background:#eef8f1;border-radius:8px;padding:7px}

/* Put the chapter description first in the desktop lesson sidebar. */
.lesson-grid > .lesson-sidebar{display:flex;flex-direction:column}.lesson-sidebar > .lesson-description-card{order:-1}
@media(max-width:760px){.lesson-grid > .lesson-sidebar{display:contents}}
body.portrait-mode .lesson-grid > .lesson-sidebar{display:contents}

/* Draft course authoring; no learner layout changes. */
.course-designer .table-wrap { margin-top: 20px; }
#course-chapter-options { max-height: 300px; overflow-y: auto; }
.course-selected-row { padding: 12px; margin-block: 10px; border: 1px solid #81b1d1; border-radius: 12px; background: #f7fbff; }
.course-selected-row .actions { flex-wrap: wrap; }
#course-plan-preview small { display: block; margin-block: 6px; color: #536c7a; }

/* Course selection only; existing lesson and desktop sizes stay unchanged. */
.course-directory-heading{display:block;padding:12px 4px;background:transparent;height:auto}
.course-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.course-choice-card{border:1px solid #81b1d1;border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.course-choice-card>img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#e8f2f8}
.course-choice-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}.course-choice-body h2,.course-choice-body p{margin:0}
.course-choice-body p{line-height:1.9;color:#536c7a}.course-choice-body>.button{margin-top:auto;text-align:center}
.course-choice-subject{color:#0069a6;font-weight:600}.course-choice-progress{display:flex;align-items:center;gap:12px}.course-choice-progress progress{flex:1;min-width:0}
.course-activation-list{display:grid;gap:10px}.course-activation-list .answer{display:flex;align-items:center;gap:12px}.course-activation-list small{margin-inline-start:auto}
.course-directory-mode #account-avatar{display:none}
.course-catalog-link{display:block;margin:12px 0}
.course-content-picker .tabs{flex-wrap:wrap}.course-activation-row{display:flex;gap:12px;align-items:center}.course-activation-row>label{flex:1}
body.course-card-embed{background:transparent;padding:0;min-height:0}body.course-card-embed #jahatyar-app{min-height:0}.course-card-embed .course-card-grid{grid-template-columns:1fr}.course-card-embed .course-directory{padding:4px;max-width:480px;margin-inline:auto}
@media(max-width:760px){.course-card-grid{grid-template-columns:1fr;gap:14px}.course-choice-body{padding:16px}.course-activation-list .answer{flex-wrap:wrap}}

.review-toolbar{display:flex;align-items:end;flex-wrap:wrap;gap:14px}.review-toolbar label{min-width:180px}.review-criterion{display:grid;grid-template-columns:1fr 1.5fr;gap:16px;padding:12px 0;border-bottom:1px solid #87b5cf}.review-criterion select{min-width:100px}.review-total{padding:16px;border-radius:12px;background:#e5f3ff;color:#08476c;font-size:18px}.review-candidate{padding:16px;margin:12px 0;border:1px solid #87b5cf;border-radius:14px}.review-candidate ul{padding-right:20px}.review-candidate li{margin:8px 0}.review-candidate h4{margin:0 0 10px}.review-candidate p{line-height:1.9}#team-search-form{display:flex;gap:12px;align-items:end}#team-search-form label{flex:1}.review-score-form fieldset{border:0}#review-score-form fieldset{border:0;padding:0}#review-score-form textarea{min-height:70px}@media(max-width:650px){.review-criterion{grid-template-columns:1fr}#team-search-form{flex-wrap:wrap}#team-search-form label{flex-basis:100%}}

.compact-course-builder{padding:16px!important}.compact-course-builder h2{margin:0 0 12px}.builder-top{display:flex;justify-content:center;margin-bottom:14px}.builder-course-row{display:flex;gap:8px;align-items:center;padding:8px;border:1px solid #8db9d9;border-radius:12px;background:#f5f9fc;margin-bottom:7px}.builder-course-row>input{width:18px;height:18px;flex-shrink:0}.builder-course-name{flex:1;min-width:100px;display:flex;flex-direction:column;gap:3px}.builder-course-name small{color:#7292a7}.compact-course-builder button,.builder-form button{min-height:32px;padding:7px 12px;border-radius:9px}.builder-intro{display:grid;grid-template-columns:1fr 250px;gap:16px}.builder-form label{display:flex;flex-direction:column;gap:5px;margin:7px 0}.builder-form input,.builder-form select,.builder-form textarea{padding:8px 10px;min-height:36px}.builder-form h3{font-size:16px;margin:0 0 8px}.builder-form .hint{margin:7px 0;font-size:12px}.builder-section{padding:14px 0;border-top:1px solid #8db9d9;margin-top:12px}.builder-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.builder-image-picker{position:relative;aspect-ratio:1.6;background:#f1f7fb;border:1px dashed #004b8d;border-radius:12px;overflow:hidden;justify-content:center;align-items:center;cursor:pointer}.builder-image-picker img{width:100%;height:100%;object-fit:contain}.builder-image-picker input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.builder-source-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.builder-source-tree{height:240px;overflow:auto;background:#f8fbfd;border:1px solid #95bdd9;border-radius:10px;padding:8px}.builder-source-node{margin-bottom:6px}.builder-source-node>label{display:flex;flex-direction:row;align-items:flex-start;gap:6px;font-size:12px;line-height:1.7}.builder-source-node input[type=checkbox]{min-height:0;width:15px;height:15px;margin-top:3px;flex-shrink:0}.builder-source-node .builder-destination{font-size:11px;align-items:center}.builder-source-node select{max-width:160px;min-height:28px;padding:3px 6px}.builder-import-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border:1px solid #8db9d9;border-radius:9px;margin-bottom:5px}.builder-import-row>div{display:flex;gap:4px}.builder-import-row button{padding:4px 9px;min-height:28px}.builder-footer{display:flex;align-items:center;gap:10px;margin-top:12px}.builder-form[hidden],.builder-form [hidden]{display:none!important}.compact-team .panel{padding:16px;margin-bottom:10px}.compact-team h2,.compact-team h3{margin:0 0 10px;font-size:17px}.compact-team p{margin:8px 0}.compact-team table{font-size:12px}.compact-team th,.compact-team td{padding:8px 10px}.compact-team button{min-height:32px;padding:7px 12px;border-radius:9px}.compact-team #team-search-form{display:flex;justify-content:flex-start;gap:8px;align-items:flex-end;max-width:650px;margin:0}.compact-team #team-search-form label{display:flex;flex-direction:column;flex:0 1 490px;gap:6px}.compact-team input,.compact-team select{min-height:34px;padding:7px 10px}.compact-team .table-wrap{margin-top:8px}.compact-team .team-group{margin-top:10px}.compact-team .team-group h3{margin-bottom:7px}@media(max-width:700px){.builder-intro{grid-template-columns:1fr}.builder-image{grid-row:1;max-width:260px}.builder-source-slots{grid-template-columns:1fr}.builder-levels{grid-template-columns:1fr 1fr}.builder-course-row{flex-wrap:wrap}.builder-course-name{flex-basis:calc(100% - 35px)}.compact-team table{min-width:720px}.compact-team #team-search-form label{flex:1}}

/* Keep the team search input single-line inside its column label. */
.compact-team #team-search-form label{min-width:0;margin:0}
.compact-team #team-search-form input{flex:0 0 auto;box-sizing:border-box;width:100%;height:38px;min-height:38px;max-height:38px;margin:0}
.compact-team #team-search-form button{height:38px;margin:0}

/* Course designer cards: image, description, then per-course actions. */
.compact-course-builder .builder-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px;align-items:stretch}
.compact-course-builder .builder-course-card{display:flex;flex-direction:column;align-items:stretch;padding:0;margin:0;gap:0;background:#fff;overflow:hidden;border-radius:14px}
.builder-card-image{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:#e9f4fa;border-bottom:1px solid #8db9d9}
.builder-card-image img{display:block;width:100%;height:100%;object-fit:contain}
.builder-card-placeholder{color:#6c899d;font-size:12px}
.builder-card-body{display:flex;flex-direction:column;flex:1;padding:13px;gap:10px;min-width:0}
.builder-card-heading{display:flex;align-items:flex-start;gap:7px}
.builder-card-heading input{width:17px;height:17px;flex:0 0 17px;margin:3px 0 0;min-height:0}
.builder-card-heading h3{font-size:16px;line-height:1.7;margin:0}
.builder-card-meta{display:flex;flex-wrap:wrap;gap:6px;color:#6c899d}
.builder-card-meta small{background:#edf5fa;padding:3px 7px;border-radius:7px}
.builder-card-description{font-size:13px;line-height:1.9;margin:0;overflow-wrap:anywhere}
.builder-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:auto;padding-top:5px}
.builder-card-actions button{width:100%;white-space:normal;font-size:12px;padding:7px 9px}

.unified-certificates>.panel{min-width:0;padding:16px}.unified-certificates h3{margin:0 0 10px}.unified-certificates .quick-list-search{margin:0 0 12px}.unified-certificates table{font-size:12px}.unified-certificates th,.unified-certificates td{padding:8px}.unified-certificates .review-candidate{margin:0 0 10px}

.builder-cover-picker{aspect-ratio:2172/616;margin-top:15px!important}.course-image-crop{border:1px solid #014d87;border-radius:10px;padding:8px;margin:8px 0}.course-crop-canvas{display:block;width:100%;height:auto;border:1px solid #003d81;border-radius:8px;cursor:grab;touch-action:none}.course-image-crop label{font-size:12px}.course-image-crop input[type=range]{padding:0;min-height:26px;accent-color:#0062a5}.course-image-crop .actions{gap:6px;flex-wrap:wrap}

.builder-image-picker{aspect-ratio:16/9}.builder-image-picker.builder-cover-picker{aspect-ratio:2172/616}

.compact-review-board>.panel{padding:14px;margin-bottom:10px}.compact-review-board h2{margin:0 0 9px;font-size:18px}.compact-review-board h3{margin:0 0 10px;font-size:15px}.compact-review-board .review-toolbar{gap:8px;align-items:end;flex-wrap:wrap}.compact-review-board .review-toolbar label{margin:0;gap:4px;font-size:12px;min-width:140px;flex:0 1 210px}.compact-review-board .hint{margin:8px 0 0;font-size:11px}.compact-review-board button{padding:7px 12px;min-height:32px;border-radius:9px}.compact-review-board input,.compact-review-board select{padding:6px 9px;min-height:34px}.compact-review-board th,.compact-review-board td{padding:8px;font-size:12px}.review-assignee-slots{display:flex;gap:5px;min-width:330px}.review-assignee-slots select{width:110px;min-width:0;flex:1}.compact-review-board td[title="به وقت تهران"]{white-space:nowrap}.compact-review-board td[dir=ltr]{white-space:nowrap}

.quiz-exit-confirm{position:sticky;top:0;z-index:5;background:#fff7e8;border:1px solid #d9ab56;border-radius:10px;padding:12px;margin-bottom:12px}.quiz-exit-confirm p{margin:0 0 8px}.quiz-exit-confirm .actions{gap:8px}

/* System error tickets use the compact site style. */
.system-report-panel{padding:16px}.system-report-panel h2{margin:0 0 14px}.system-report-panel .form-grid{gap:12px}.system-report-panel textarea{min-height:120px;resize:vertical}.system-report-panel input:not([type=checkbox]):not([type=file]),.system-report-panel select{min-height:36px;height:36px}.report-table-wrap{overflow-x:auto}.report-table-wrap table{min-width:650px}.report-table-wrap th,.report-table-wrap td{padding:9px 10px}.report-id{display:block;color:#708899;font-size:11px;margin-top:4px}.report-message{white-space:pre-wrap;overflow-wrap:anywhere}.report-attachment{display:block;max-width:100%;max-height:420px;object-fit:contain;margin:12px 0;border:1px solid #89afc9;border-radius:8px}.report-attachment[hidden]{display:none}.report-details{padding:12px;border:1px solid #89afc9;border-radius:10px;margin:12px 0}.report-priority{white-space:nowrap;border:1px solid currentColor;border-radius:6px;padding:3px 6px}.priority-critical{color:#b82536;background:#fff1f2}.priority-high{color:#9b6100;background:#fff7e5}.priority-medium{color:#146a9c;background:#eef7ff}.priority-low{color:#377765;background:#eff9f4}.system-reports-dialog{width:min(980px,94vw);max-width:980px}.system-report-popup .answer{margin:12px 0}.system-report-popup>p{margin:0 0 12px}

/* Rectangular chapter cards: artwork above, chapter badge and title below. */
.chapter-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;direction:rtl;align-items:start}
button.chapter-card{display:flex;flex-direction:column;gap:0;width:100%;min-width:0;height:auto;margin:0;padding:0;overflow:hidden;border:1px solid #aac8dd;border-radius:15px;background:#fff;color:#06466b;box-shadow:0 2px 7px rgba(23,72,105,.07);text-align:right;font:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
button.chapter-card:hover:not(:disabled){border-color:#237fae;box-shadow:0 4px 12px rgba(23,72,105,.14);transform:translateY(-2px)}
button.chapter-card:focus-visible{outline:2px solid #0875b3;outline-offset:3px}
.chapter-card-image{position:relative;display:block;width:100%;aspect-ratio:625/417;overflow:hidden;background:#e8f2f8;border:0;border-radius:14px 14px 0 0}
.chapter-card-image img{display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0}
.chapter-card-footer{display:flex;align-items:center;gap:7px;width:100%;min-height:74px;padding:8px;box-sizing:border-box;background:#fff;border-top:1px solid #d0e0ea}
.chapter-card-number{flex:0 0 auto;display:block;background:#0877b3;color:#fff;border-radius:9px;padding:4px 7px;font-size:11px;line-height:1.5;white-space:nowrap;font-weight:700}
.chapter-card-title{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;text-align:center;font-size:12px;line-height:1.65;font-weight:700}
.chapter-card-status{position:absolute;left:7px;top:7px;max-width:calc(100% - 14px);border:1px solid rgba(255,255,255,.7);border-radius:7px;padding:2px 6px;background:rgba(248,252,255,.94);color:#476575;font-size:10px;line-height:1.5;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.chapter-card.done .chapter-card-status{color:#246e52}.chapter-card.in-progress:not(.locked) .chapter-card-status{color:#00649c}
.chapter-card-placeholder{display:grid;place-items:center;height:100%;font-size:40px;color:#a3b8c6;background:linear-gradient(145deg,#f2f7fa,#e2edf4)}
button.chapter-card.future{opacity:1;cursor:default}.chapter-card-image .chapter-coming-soon-image{filter:brightness(1.16);object-fit:contain}
@media(max-width:1000px){.chapter-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.chapter-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.chapter-card-footer{padding:7px;gap:5px}.chapter-card-title{font-size:11px}.chapter-card-number{font-size:10px;padding:4px 6px}}
@media(max-width:520px){.chapter-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.chapter-card-footer{min-height:74px}.chapter-card-title{font-size:12px}.chapter-card-number{font-size:11px}}
@media(prefers-reduced-motion:reduce){button.chapter-card{transition:none}button.chapter-card:hover:not(:disabled){transform:none}}

.chapter-card-image .chapter-introduction-image{border-radius:0}
.journey-panel{position:relative;margin-top:76px;padding:18px 20px 20px;border-color:#96b9d6}
.journey-heading{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:300px;height:60px;max-width:75%;z-index:2}
.journey-heading>img{display:block;width:100%;height:100%;object-fit:contain}
.journey-heading h2{position:absolute;bottom:5px;left:0;right:0;margin:0;text-align:center;color:#12405c;font-size:14px;line-height:1.7;font-weight:700}
.journey-heading h2 span{color:#c72c35}

/* Keep the entire image sharp over a blurred copy of the same artwork. */
.chapter-card-image img{position:absolute;inset:0;z-index:1;object-fit:contain}
.chapter-card-image img.chapter-image-backdrop{z-index:0;object-fit:cover;filter:blur(16px);transform:scale(1.12);pointer-events:none}
.chapter-card-status{z-index:2}

/* Column count follows the space available to the chapter panel. */
.journey-panel{container-type:inline-size}
@container(max-width:1050px){.chapter-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container(max-width:820px){.chapter-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(max-width:590px){.chapter-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:340px){.chapter-card-grid{grid-template-columns:1fr}}

.journey-panel{margin-top:14px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.journey-heading{display:none}
.chapter-card-footer{height:auto;min-height:54px;padding:6px 8px}
/* The new card grid occupies the entire route in both orientation modes. */
body.portrait-mode .journey{display:block;grid-template-columns:none;padding-inline:0}

.chapter-card-grid{position:relative;padding:14px;gap:34px 26px}.chapter-card{position:relative;z-index:1}.chapter-card-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}.chapter-card-path path{fill:none;stroke:#88b3d3;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chapter-overview-dialog{width:min(990px,94vw);max-width:990px;max-height:90vh;padding:0;overflow:hidden;border-radius:22px;position:fixed}
.chapter-overview-dialog>.modal-head{position:absolute;right:16px;top:16px;z-index:3;margin:0;padding:0;background:none;border:0}.chapter-overview-dialog>.modal-head h2{display:none}.chapter-overview-dialog>.modal-head .icon-button{width:38px;height:38px;min-height:38px;padding:7px;border:1px solid #d5e1ea;border-radius:50%;background:rgba(255,255,255,.94);color:#07395f}
.chapter-overview-layout{display:grid;grid-template-columns:45% 55%;direction:rtl;min-height:540px;max-height:90vh}.chapter-overview-art{position:relative;min-width:0;overflow:hidden;background:#e9f2f7}.chapter-overview-art img{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}.chapter-overview-art .chapter-coming-soon-image{filter:brightness(1.16);object-fit:contain}
.chapter-overview-copy{padding:34px 30px;min-width:0;overflow:auto;background:#fff}.chapter-overview-copy h2{font-size:22px;line-height:1.65;margin:0 0 16px;color:#07395f}.chapter-overview-intro{white-space:pre-line;font-size:13px;line-height:2;color:#63778a;margin:0 0 22px}
.chapter-overview-tabs{display:flex;gap:4px;border:1px solid #d8e4ed;background:#eef3f7;padding:4px;border-radius:11px;margin-bottom:14px}.chapter-overview-tabs button{flex:1;min-width:0;padding:8px 4px;min-height:38px;background:transparent;border:1px solid transparent;border-radius:8px;color:#617281;font-size:12px;line-height:1.6}.chapter-overview-tabs [aria-selected=true]{background:#fff;color:#0062a5;border-color:#e0e8ee;box-shadow:0 2px 5px rgba(0,0,0,.04);font-weight:700}
.chapter-overview-copy [role=tabpanel]{border:1px solid #b9d0e0;background:#f8fafc;padding:14px;border-radius:12px}.chapter-overview-copy [role=tabpanel][hidden]{display:none}.chapter-overview-topic{display:flex;width:100%;align-items:center;gap:8px;background:#fff;border:1px solid #b5cfe1;border-radius:9px;color:#174f73;padding:10px;margin:0 0 8px;text-align:right;font-size:12px}.chapter-overview-topic:last-child{margin-bottom:0}.chapter-overview-topic>span:first-child{flex:1}.chapter-overview-topic small{font-size:10px;color:#678396;white-space:nowrap}.chapter-overview-topic.is-complete{background:#eaf5fd}.chapter-important-list{margin:0;padding-right:20px;font-size:13px;line-height:2.3}.chapter-important-list li::marker{color:#0877b3}.chapter-sample-row{padding:9px 0;border-bottom:1px solid #d5e2eb;display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:12px}.chapter-sample-row:last-child{border-bottom:0}
@media(max-width:720px){.chapter-overview-layout{grid-template-columns:1fr;max-height:90vh}.chapter-overview-art{height:210px}.chapter-overview-copy{padding:20px}.chapter-overview-copy h2{font-size:18px}.chapter-overview-dialog{overflow:auto}.chapter-overview-layout{max-height:none}.chapter-card-grid{padding:12px;gap:30px 20px}}

.chapter-overview-art .chapter-introduction-image{border-radius:0}

#chapter-pane-topics{max-height:302px;overflow-y:auto;scrollbar-gutter:stable}
.chapter-overview-topic{height:48px;min-height:48px;flex-wrap:nowrap}
.chapter-overview-topic>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.chapter-overview-art img{z-index:1;object-fit:contain}
.chapter-overview-art img.chapter-image-backdrop{z-index:0;object-fit:cover;filter:blur(22px);transform:scale(1.12);pointer-events:none}
/* All tabs share a fixed window and scroll only inside their own pane. */
.chapter-overview-dialog{width:min(1280px,94vw);max-width:1280px;height:80dvh;max-height:80dvh}
.chapter-overview-layout{grid-template-columns:60% 40%;height:100%;min-height:0;max-height:none}
.chapter-overview-copy{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.chapter-overview-copy h2,.chapter-overview-tabs{flex-shrink:0}
.chapter-overview-intro{flex-shrink:0;max-height:104px;overflow-y:auto}
.chapter-overview-copy [role=tabpanel]{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable}
#chapter-pane-topics{max-height:302px;flex:1}
#chapter-pane-important,#chapter-pane-samples{max-height:302px}
@media(max-width:900px){
 .chapter-overview-dialog{height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
 .chapter-overview-layout{grid-template-columns:1fr;grid-template-rows:min(30dvh,260px) minmax(0,1fr);height:100%;min-height:0}
 .chapter-overview-art{height:auto}
 .chapter-overview-copy{padding:18px}
 .chapter-overview-copy h2{font-size:16px;margin-bottom:8px}
 .chapter-overview-intro{font-size:12px;max-height:72px;margin-bottom:12px}
 .chapter-overview-tabs{margin-bottom:10px}
}

.chapter-topic-check{flex:0 0 18px;width:18px;height:18px;display:inline-grid;place-items:center;font-size:13px;color:transparent}
.chapter-topic-check.is-checked{border-radius:50%;background:#0877b3;color:#fff}

.chapter-overview-topic>span:first-child{text-align:right}
.chapter-overview-topic.is-complete{background:#c8e9fb;border-color:#76b9e1}
.chapter-overview-topic.is-started{background:#edf7fe;border-color:#a6cfea}
.chapter-overview-intro{max-height:none!important;overflow:visible!important}
.chapter-overview-copy{overflow-y:auto}
.chapter-overview-copy [role=tabpanel]{min-height:150px;flex-shrink:0}
@media(max-width:900px){.chapter-overview-layout{grid-template-rows:min(23dvh,210px) minmax(0,1fr)}}
.chapter-card-grid{gap:40px 32px}
@media(max-width:900px){.chapter-card-grid{gap:32px 24px}}

.system-report-entry-dialog{width:min(650px,94vw);max-width:650px;max-height:92dvh;padding:20px;overflow-y:auto;border-radius:18px}
.system-report-entry-dialog .modal-head{margin-bottom:14px}
.system-report-entry-dialog .modal-head h2{font-size:18px}
.system-report-entry-dialog .system-report-panel{margin:0;padding:0;border:0;box-shadow:none;background:transparent}
.system-report-entry-dialog .system-report-panel>h2{display:none}
.system-report-entry-dialog .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.system-report-entry-dialog label{display:block;margin:0 0 12px;font-size:13px;line-height:1.8;color:#174a68}
.system-report-entry-dialog .form-grid label{margin:0}
.system-report-entry-dialog input,.system-report-entry-dialog select{height:44px;min-height:44px;max-height:none;padding:8px 11px;line-height:1.6;font-size:13px;color:#174a68;background:#fff;box-sizing:border-box;margin-top:5px}
.system-report-entry-dialog textarea{height:124px;min-height:110px;padding:10px 12px;line-height:1.9;font-size:13px;color:#174a68;background:#fff;box-sizing:border-box;margin-top:5px}
.system-report-entry-dialog input[type=file]{height:auto;padding:7px;font-size:12px}
.system-report-entry-dialog input::placeholder,.system-report-entry-dialog textarea::placeholder{color:#627b8c;opacity:1}
.system-report-entry-dialog small{display:block;font-size:11px;color:#526f82}
.system-report-entry-dialog #report-image-error:empty,.system-report-entry-dialog #report-result:empty{display:none}
.system-report-entry-dialog .report-attachment{max-height:160px;object-fit:contain;margin-bottom:10px}
.system-report-entry-dialog button[type=submit]{min-height:42px;padding:8px 18px;font-size:13px}
@media(max-width:520px){.system-report-entry-dialog{padding:16px}.system-report-entry-dialog .form-grid{grid-template-columns:1fr;gap:10px}.system-report-entry-dialog label{margin-bottom:10px}}

.chapter-card.done:not(.locked):not(.future){border-color:#76b9e1}
.chapter-card.done:not(.locked):not(.future) .chapter-card-footer{background:#c8e9fb}
.chapter-card.done:not(.locked):not(.future) .chapter-card-status{background:#0877b3;color:#fff;border-color:#0877b3}
.chapter-card.in-progress:not(.locked):not(.future) .chapter-card-footer{background:#edf7fe}
.chapter-card.in-progress:not(.locked):not(.future) .chapter-card-status{background:#e1f3ff;color:#17638e;border-color:#a6cfea}
.chapter-card.locked .chapter-card-footer,.chapter-card.locked .chapter-card-status{background:#fff;color:#476575}
button.chapter-card.future{opacity:1;background:#fff;pointer-events:none;cursor:default;transform:none;box-shadow:none;transition:none}
button.chapter-card.future .chapter-card-image,button.chapter-card.future .chapter-card-footer{opacity:.5}
button.chapter-card.future:hover{transform:none;border-color:#aac8dd;box-shadow:none}

.tool-shortcut .tool-shortcut-art{display:block;width:80px;height:80px;max-width:65%;object-fit:contain;flex-shrink:0;border:0;background:transparent}
@media(max-width:520px){.tool-shortcut .tool-shortcut-art{width:68px;height:68px}}

.compact-review-board .review-board-header{padding:14px 16px}
.review-header-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.review-header-heading h2{margin:0}
#review-search-status{font-size:12px;color:#526f82;white-space:nowrap}
.compact-review-board .review-toolbar{display:grid;grid-template-columns:minmax(180px,220px) minmax(190px,230px) minmax(240px,1fr);gap:12px;align-items:end}
.compact-review-board .review-toolbar label{display:flex;flex-direction:column;min-width:0;max-width:none;font-size:12px;margin:0;gap:5px}
.review-kind-field>span{display:block;font-size:12px;margin-bottom:5px;color:#526f82}
.compact-review-board .review-kind-field .tabs{display:flex;gap:6px;margin:0;padding:0;border:0}
.compact-review-board .review-kind-field button{flex:1;height:40px;margin:0;white-space:nowrap}
.compact-review-board .review-toolbar input,.compact-review-board .review-toolbar select{width:100%;height:40px;min-height:40px;padding:7px 10px;margin:0;font-size:13px;line-height:1.5;box-sizing:border-box;color:#174a68}
.compact-review-board .review-toolbar input::placeholder{color:#637d8e;opacity:1}
.compact-review-board .review-board-header .hint{margin:10px 0 0;font-size:11px;line-height:1.8}
.evaluation-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:12px;direction:rtl;align-items:start}
.evaluation-layout>.panel{min-width:0;margin:0;padding:14px}
.reviewer-filter{display:flex;flex-direction:column;align-items:flex-start;text-align:right;gap:5px;width:100%;margin-bottom:8px;padding:10px!important;background:#fff;color:#174a68;border:1px solid #a4c7dd;border-radius:10px}
.reviewer-filter.selected{background:#e1f3ff;border-color:#0877b3}
.reviewer-filter strong{font-size:12px}.reviewer-filter small{font-size:10px;color:#526f82;line-height:1.8}
.review-data-row[hidden]{display:none}
.review-status{display:inline-block;padding:4px 7px;border-radius:6px;background:#f1f6fa;white-space:nowrap;font-size:11px}
.review-status.is-submitted{background:#d9f0e8;color:#266649}
.review-candidate h4{display:flex;justify-content:space-between;align-items:center;gap:10px}
.review-candidate .certificate-score{color:#0062a5;font-size:13px;white-space:nowrap}
@media(max-width:950px){.compact-review-board .review-toolbar{grid-template-columns:1fr 1fr}.compact-review-board .review-search-field{grid-column:1/-1}}
@media(max-width:700px){.evaluation-layout{grid-template-columns:1fr}.evaluation-reviewers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.evaluation-reviewers h3{grid-column:1/-1}.reviewer-filter{margin:0}.compact-review-board .review-toolbar{grid-template-columns:1fr}.compact-review-board .review-search-field{grid-column:auto}.review-header-heading{align-items:flex-start}}

.user-progress .completion-record-status{display:block;color:#35657e;line-height:1.7;margin-top:4px;font-size:10px}

.pdf-reader-dialog{width:min(1100px,96vw);max-width:96vw;height:92dvh;max-height:92dvh;padding:16px;overflow:hidden}
.pdf-reader-dialog[open]{display:flex;flex-direction:column;gap:10px}
.pdf-reader-dialog .modal-head{margin:0;flex-shrink:0}
.pdf-reader-dialog>.pdf-browser-link{align-self:center;flex-shrink:0;max-width:100%;font-size:12px}
.pdf-reader{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden;border:1px solid #a4c7dd;border-radius:12px;background:#e8eff4}
.pdf-reader-toolbar{display:flex;flex-shrink:0;align-items:center;justify-content:center;gap:8px;padding:8px;background:#f6faff;border-bottom:1px solid #a4c7dd;direction:rtl}
.pdf-reader-toolbar button{min-width:34px;min-height:34px;margin:0;padding:5px 9px;line-height:1;font-size:18px;border-radius:8px}
.pdf-reader-toolbar [data-pdf-count]{min-width:70px;text-align:center;font-size:12px;color:#174a68}
.pdf-reader-page{flex:1;min-height:0;overflow:auto;padding:12px;text-align:center;direction:ltr}
.pdf-reader-page canvas{display:block;margin:0 auto;background:#fff;box-shadow:0 2px 8px rgba(25,61,85,.12)}
.pdf-reader-page canvas[hidden]{display:none}
.pdf-reader-page [data-pdf-message]{direction:rtl;text-align:center;color:#174a68;font-size:13px;line-height:1.8}
@media(max-width:700px){.lesson-resources{text-align:center}.lesson-resources .resource-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.lesson-resources .resource-row>span{flex:0 0 auto!important;width:100%;text-align:center}.lesson-resources .resource-actions{justify-content:center;margin:0 auto;width:min(280px,100%)}.lesson-resources .resource-actions>button,.lesson-resources .resource-actions>.disabled-tooltip-target>button{justify-content:center;text-align:center}.pdf-reader-dialog{padding:10px;height:94dvh;max-height:94dvh}.pdf-reader-toolbar{gap:5px;padding:6px}.pdf-reader-dialog>.pdf-browser-link{padding:7px 10px}}
body.portrait-mode .lesson-resources{text-align:center}body.portrait-mode .lesson-resources .resource-row{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}body.portrait-mode .lesson-resources .resource-row>span{width:100%;flex:0 0 auto!important;text-align:center}body.portrait-mode .lesson-resources .resource-actions{margin:0 auto;justify-content:center}

/* Compact learner summary and navigation; also overrides older Android shell styles. */
.mobile-nav-break{display:none}

body.portrait-mode .layout:not(.admin-layout) .path-summary-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:"continue continue" "progress completed"!important;gap:8px!important;align-items:stretch!important}
body.portrait-mode .layout:not(.admin-layout) .path-summary-row>article{min-height:0!important;margin:0!important}
body.portrait-mode .layout:not(.admin-layout) .path-summary-row .continue-strip{grid-area:continue!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;padding:6px 9px!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important}
body.portrait-mode .layout:not(.admin-layout) .path-summary-row .continue-strip>div{display:block!important;min-width:0!important;flex:1!important;overflow:hidden!important}
body.portrait-mode .layout:not(.admin-layout) .path-summary-row .continue-strip>div>span,body.portrait-mode .layout:not(.admin-layout) .path-summary-row .continue-strip small{display:none!important}
body.portrait-mode .layout:not(.admin-layout) .path-summary-row .continue-strip strong{display:block!important;font-size:12px!important;line-height:1.5!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-height:none!important;margin:0!important}
body.portrait-mode .layout:not(.admin-layout) .path-summary-row .continue-strip button{flex:0 0 auto!important;width:auto!important;min-height:30px!important;height:30px!important;padding:4px 8px!important;font-size:10px!important;line-height:1.4!important;white-space:nowrap!important;gap:4px!important}
body.portrait-mode .layout:not(.admin-layout) .image-progress-card{grid-area:progress!important;aspect-ratio:783/255!important;position:relative!important;padding:0!important;height:auto!important;min-height:0!important;border-radius:10px!important}
body.portrait-mode .layout:not(.admin-layout) .image-progress-card .image-progress-art{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;aspect-ratio:auto!important;margin:0!important}
body.portrait-mode .layout:not(.admin-layout) .image-progress-card .image-progress-art img{width:100%!important;height:100%!important;object-fit:fill!important}
body.portrait-mode .layout:not(.admin-layout) .image-progress-percent{font-size:12px!important;min-width:0!important;line-height:1.5!important;right:5px!important;bottom:3px!important;padding:0 7px!important}
body.portrait-mode .layout:not(.admin-layout) .completed-topics-card{grid-area:completed!important;padding:4px 6px!important;border-radius:10px!important;gap:4px!important}
body.portrait-mode .layout:not(.admin-layout) .completed-topics-card .stat-icon{display:none!important}
body.portrait-mode .layout:not(.admin-layout) .completed-topics-card strong{font-size:21px!important;line-height:1.2!important;margin:0!important}
body.portrait-mode .layout:not(.admin-layout) .completed-topics-card strong small{font-size:10px!important}
body.portrait-mode .layout:not(.admin-layout) .completed-topics-card p{font-size:10px!important;line-height:1.3!important;margin:2px 0 0!important;white-space:nowrap!important}
body.portrait-mode .layout:not(.admin-layout) .sidebar{padding:3px 4px calc(3px + env(safe-area-inset-bottom,0px))!important;background:rgba(7,57,95,.93)!important;border-top:1px solid rgba(255,255,255,.2)!important}
body.portrait-mode .layout:not(.admin-layout) .sidebar nav{display:flex!important;gap:2px!important;overflow:visible!important;align-items:stretch!important}
body.portrait-mode .layout:not(.admin-layout) .sidebar .nav-item{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:48px!important;height:48px!important;padding:2px 1px!important;margin:0!important;gap:1px!important;font-size:10px!important;line-height:1.15!important;color:#fff!important;background:transparent!important;border-radius:7px!important;box-sizing:border-box!important}
body.portrait-mode .layout:not(.admin-layout) .sidebar .nav-item b{display:block!important;font-size:18px!important;line-height:18px!important;height:18px!important;margin:0!important;padding:0!important;color:#fff!important}
body.portrait-mode .layout:not(.admin-layout) .sidebar .nav-item>span{display:block!important;white-space:normal!important;text-align:center!important;font-size:10px!important;line-height:12px!important;margin:0!important;padding:0!important}
body.portrait-mode .layout:not(.admin-layout) .sidebar .nav-item.active{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important;color:#fff!important}
body.portrait-mode .layout:not(.admin-layout) .mobile-nav-break{display:block!important}
body.portrait-mode .layout:not(.admin-layout) .workspace{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}

@media(max-width:760px){

body .layout:not(.admin-layout) .path-summary-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:"continue continue" "progress completed"!important;gap:8px!important;align-items:stretch!important}
body .layout:not(.admin-layout) .path-summary-row>article{min-height:0!important;margin:0!important}
body .layout:not(.admin-layout) .path-summary-row .continue-strip{grid-area:continue!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;padding:6px 9px!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important}
body .layout:not(.admin-layout) .path-summary-row .continue-strip>div{display:block!important;min-width:0!important;flex:1!important;overflow:hidden!important}
body .layout:not(.admin-layout) .path-summary-row .continue-strip>div>span,body .layout:not(.admin-layout) .path-summary-row .continue-strip small{display:none!important}
body .layout:not(.admin-layout) .path-summary-row .continue-strip strong{display:block!important;font-size:12px!important;line-height:1.5!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-height:none!important;margin:0!important}
body .layout:not(.admin-layout) .path-summary-row .continue-strip button{flex:0 0 auto!important;width:auto!important;min-height:30px!important;height:30px!important;padding:4px 8px!important;font-size:10px!important;line-height:1.4!important;white-space:nowrap!important;gap:4px!important}
body .layout:not(.admin-layout) .image-progress-card{grid-area:progress!important;aspect-ratio:783/255!important;position:relative!important;padding:0!important;height:auto!important;min-height:0!important;border-radius:10px!important}
body .layout:not(.admin-layout) .image-progress-card .image-progress-art{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;aspect-ratio:auto!important;margin:0!important}
body .layout:not(.admin-layout) .image-progress-card .image-progress-art img{width:100%!important;height:100%!important;object-fit:fill!important}
body .layout:not(.admin-layout) .image-progress-percent{font-size:12px!important;min-width:0!important;line-height:1.5!important;right:5px!important;bottom:3px!important;padding:0 7px!important}
body .layout:not(.admin-layout) .completed-topics-card{grid-area:completed!important;padding:4px 6px!important;border-radius:10px!important;gap:4px!important}
body .layout:not(.admin-layout) .completed-topics-card .stat-icon{display:none!important}
body .layout:not(.admin-layout) .completed-topics-card strong{font-size:21px!important;line-height:1.2!important;margin:0!important}
body .layout:not(.admin-layout) .completed-topics-card strong small{font-size:10px!important}
body .layout:not(.admin-layout) .completed-topics-card p{font-size:10px!important;line-height:1.3!important;margin:2px 0 0!important;white-space:nowrap!important}
body .layout:not(.admin-layout) .sidebar{padding:3px 4px calc(3px + env(safe-area-inset-bottom,0px))!important;background:rgba(7,57,95,.93)!important;border-top:1px solid rgba(255,255,255,.2)!important}
body .layout:not(.admin-layout) .sidebar nav{display:flex!important;gap:2px!important;overflow:visible!important;align-items:stretch!important}
body .layout:not(.admin-layout) .sidebar .nav-item{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:48px!important;height:48px!important;padding:2px 1px!important;margin:0!important;gap:1px!important;font-size:10px!important;line-height:1.15!important;color:#fff!important;background:transparent!important;border-radius:7px!important;box-sizing:border-box!important}
body .layout:not(.admin-layout) .sidebar .nav-item b{display:block!important;font-size:18px!important;line-height:18px!important;height:18px!important;margin:0!important;padding:0!important;color:#fff!important}
body .layout:not(.admin-layout) .sidebar .nav-item>span{display:block!important;white-space:normal!important;text-align:center!important;font-size:10px!important;line-height:12px!important;margin:0!important;padding:0!important}
body .layout:not(.admin-layout) .sidebar .nav-item.active{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important;color:#fff!important}
body .layout:not(.admin-layout) .mobile-nav-break{display:block!important}
body .layout:not(.admin-layout) .workspace{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}

}

/* Keep artwork inside its grid column on the narrowest phones. */
body.portrait-mode .layout:not(.admin-layout) .path-summary-row>article{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
body.portrait-mode .layout:not(.admin-layout) .completed-topics-card{padding:2px 5px!important}
body.portrait-mode .layout:not(.admin-layout) .completed-topics-card strong{font-size:20px!important;line-height:1.1!important}

@media(max-width:760px){body .layout:not(.admin-layout) .path-summary-row>article{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
body .layout:not(.admin-layout) .completed-topics-card{padding:2px 5px!important}
body .layout:not(.admin-layout) .completed-topics-card strong{font-size:20px!important;line-height:1.1!important}
}

/* Every instructor criterion is visible in a compact three-column form. */
dialog.review-form-dialog{width:min(740px,calc(100vw - 20px));max-width:calc(100vw - 20px);height:auto;max-height:calc(100dvh - 20px);padding:12px;box-sizing:border-box}
.review-form-dialog .modal-head{margin:0 0 6px;gap:8px}.review-form-dialog .modal-head h2{font-size:16px;line-height:1.5;margin:0}.review-form-dialog .modal-head .icon-button{width:30px;height:30px;min-height:30px;padding:0}
.review-form-dialog .review-evaluator-label{font-size:11px;line-height:1.5;margin:0 0 8px}
.review-form-dialog #review-score-form fieldset{margin:0;border:0;padding:0;min-width:0}
.review-form-dialog .review-criteria-header,.review-form-dialog .review-criterion{display:grid;grid-template-columns:minmax(120px,1fr) 64px minmax(120px,1.25fr);gap:8px;align-items:center}
.review-form-dialog .review-criteria-header{font-size:11px;line-height:1.4;padding:4px 0;color:#5f7e91;border-bottom:1px solid #bed4e3}
.review-form-dialog .review-criterion{min-height:38px;padding:3px 0;border-bottom:1px solid #d9e6ef;margin:0}
.review-form-dialog .review-criterion .review-criterion-name{font-size:12px;line-height:1.4;margin:0;display:block}
.review-form-dialog .review-criterion select{width:100%;min-width:0!important;min-height:30px;height:30px;font-size:12px;padding:3px 5px;line-height:1.3;margin:0}
.review-form-dialog #review-score-form .review-criterion textarea{width:100%;min-height:30px!important;height:30px;max-height:96px;padding:4px 6px;margin:0;box-sizing:border-box;font-size:12px;line-height:1.4;resize:vertical}
.review-form-dialog .review-total{display:flex;align-items:center;gap:4px;margin:8px 0 6px;padding:5px 8px;border-radius:7px;font-size:13px;line-height:1.5}
.review-form-dialog #review-score-form>.hint{font-size:10px;line-height:1.4;margin:4px 0}
.review-form-dialog #review-score-form>label:has(input[name=approved]){display:flex;align-items:center;gap:6px;margin:6px 0;font-size:11px;line-height:1.4}
.review-form-dialog input[name=approved]{width:15px;height:15px;min-height:15px;margin:0}
.review-form-dialog #review-score-form>button{min-height:30px;font-size:12px;padding:4px 12px;border-radius:7px;margin-top:3px}
@media(max-width:520px){dialog.review-form-dialog{padding:10px}.review-form-dialog .review-criteria-header,.review-form-dialog .review-criterion{grid-template-columns:minmax(96px,1.05fr) 52px minmax(76px,1fr);gap:6px}.review-form-dialog .review-criterion .review-criterion-name{font-size:11px}.review-form-dialog .modal-head h2{font-size:14px}}
@media(max-height:650px){dialog.review-form-dialog{padding:9px}.review-form-dialog .modal-head h2{font-size:14px}.review-form-dialog .review-evaluator-label{margin-bottom:4px}.review-form-dialog .review-criteria-header{padding:2px 0}.review-form-dialog .review-criterion{min-height:30px;padding:2px 0}.review-form-dialog .review-criterion .review-criterion-name{font-size:11px;line-height:1.25}.review-form-dialog .review-criterion select,.review-form-dialog #review-score-form .review-criterion textarea{height:26px;min-height:26px!important;padding:2px 5px}.review-form-dialog #review-score-form>.hint{display:none}.review-form-dialog .review-total{padding:3px 6px;margin:5px 0}.review-form-dialog #review-score-form>label:has(input[name=approved]){margin:4px 0}.review-form-dialog #review-score-form>button{min-height:26px;margin-top:0}}

/* Compact certificate records, one selected list at a time. */
.certificate-toolbar{display:flex;align-items:end;gap:14px;flex-wrap:wrap}.certificate-toolbar>label{max-width:280px;flex:1}.certificate-kind-panel .quick-list-search{max-width:380px;margin:0 0 12px}
.certificate-records{width:100%;min-width:660px}.certificate-records th,.certificate-records td{white-space:nowrap;padding:8px 10px;vertical-align:middle}.certificate-records .review-candidate{border:0;border-radius:0;padding:0}.certificate-records button{min-height:30px;padding:4px 10px;font-size:12px}.certificate-records strong{font-size:13px}.certificate-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}.certificate-records .certificate-score{font-size:13px}.certificate-kind-panel [data-legacy-certificates]{margin-top:12px}
dialog.review-news-dialog{width:min(980px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;box-sizing:border-box}.review-news-dialog .review-news-table{max-height:55dvh;overflow:auto}.review-news-dialog th,.review-news-dialog td{padding:7px 9px;font-size:12px}.review-news-dialog .review-news-confirm{display:flex;align-items:center;gap:7px;margin:12px 0}.review-news-dialog input[type=checkbox]{width:16px;height:16px;min-height:16px;margin:0}.review-news-dialog button{min-height:32px}.review-news-dialog #close-dialog[hidden]{display:none!important}

/* Fit the review window to its compact form. */
dialog.review-form-dialog{height:fit-content}

/* Expanded video fallback for browsers that reject the Fullscreen API. */
.video-fullscreen-close{position:absolute!important;top:10px;right:10px;z-index:3;width:36px;height:36px;min-height:0!important;padding:0!important;border:1px solid #fff8!important;background:#000a!important;color:#fff!important;font:26px/1 sans-serif!important;border-radius:50%!important}
.video-fullscreen-close[hidden]{display:none!important}
.video-panel.video-expanded{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;height:100vh;margin:0!important;border:0!important;border-radius:0!important;padding:0!important;background:#000!important;z-index:2147483646!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;box-shadow:none!important}
.video-expanded video{display:block!important;flex:1;min-height:0;width:100%!important;height:100%!important;object-fit:contain!important;background:#000!important;border-radius:0!important}
.video-expanded .video-controls{flex:0 0 auto;min-height:34px!important;margin:0!important;padding:3px 10px!important}
@media(orientation:portrait){.video-panel.video-expanded{inset:auto!important;left:50%!important;top:50%!important;width:100vh!important;height:100vw!important;width:100dvh!important;height:100dvw!important;transform:translate(-50%,-50%) rotate(90deg)!important;transform-origin:center!important}}
video:fullscreen,video:-webkit-full-screen{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;background:#000!important}
.video-missing-ranges{border:1px solid #e4bc62;border-radius:10px;background:#fffaf0;color:#704b0a;padding:12px;margin:10px 0}
.video-missing-ranges[hidden]{display:none!important}.video-missing-ranges ul{padding-inline-start:20px;margin:6px 0}.video-missing-ranges li{margin:7px 0;line-height:1.9}.video-missing-ranges button{min-height:28px;padding:3px 8px;font-size:12px}.video-missing-ranges p{margin:6px 0 0}

/* One spacing scale for lesson content; avoid adding grid gaps to card margins. */
.lesson-grid{gap:12px}
.lesson-grid .panel{margin:0;padding:12px}
.lesson-grid .lesson-navigation:has(#lesson-next){margin:0;gap:8px}
.lesson-grid #video-status,.lesson-grid #video-threshold-warning{margin:0;line-height:1.7}
.lesson-grid #video-status[hidden],.lesson-grid #video-threshold-warning[hidden],.lesson-grid #video-missing-ranges[hidden]{display:none!important}
.lesson-grid #download-video{margin:2px auto 0;min-height:36px;padding:6px 14px}
.lesson-grid .lesson-topic-videos{padding:10px;gap:10px}
.lesson-topic-videos .lesson-videos-group,.lesson-topic-videos .lesson-topic-quizzes{padding:10px;border-radius:11px}
.lesson-topic-videos .lesson-section-title{margin:0 0 8px;padding:6px 8px;font-size:14px;line-height:1.6}
.lesson-topic-videos .video-list-item{min-height:38px;padding:7px 9px;margin:0 0 6px}
.lesson-topic-videos .hint{margin:4px 0 0;line-height:1.7}
.lesson-topic-videos .lesson-quiz-row{padding:8px;gap:6px;margin-bottom:8px}
.lesson-topic-videos .lesson-quiz-status,.lesson-topic-videos .lesson-quiz-heading{line-height:1.7;margin:0}
.lesson-description-card h3,.lesson-resources h3{margin:0 0 7px;line-height:1.6}
.lesson-description-card p{margin:0;line-height:1.85}
.lesson-resources .resource-row{padding:8px 0;gap:6px}
.lesson-resources .resource-row:last-child{padding-bottom:0;border-bottom:0}
.lesson-resources .resource-actions{gap:6px}
.lesson-resources .resource-actions button{min-height:36px;padding:5px 10px}
.lesson-grid .video-missing-ranges{margin:0;padding:10px}
@media(max-width:760px){.lesson-grid{gap:10px}.lesson-grid .lesson-main>#video-threshold-warning,.lesson-grid .lesson-main>#video-missing-ranges{order:4}}
body.portrait-mode .lesson-grid{gap:10px}body.portrait-mode .lesson-grid .lesson-main>#video-threshold-warning,body.portrait-mode .lesson-grid .lesson-main>#video-missing-ranges{order:4}

/* Keep the entire banner visible and give the content its own edge. */
.lesson-banner{aspect-ratio:auto;height:auto;margin:0 auto 8px;flex-shrink:0}
.lesson-banner img{width:100%;height:auto;object-fit:contain;transform:none}
.lesson-banner+#content{margin-block-start:0}
.lesson-heading .breadcrumb-link{display:inline-flex;align-items:center;justify-content:center;min-height:0;margin:0;padding:2px 0;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;line-height:inherit;box-shadow:none;cursor:pointer}
.lesson-heading .breadcrumb-link:hover{text-decoration:underline;background:transparent;color:#0062a5}
.lesson-heading .breadcrumb-link:focus-visible{outline:2px solid #1681c4;outline-offset:3px}

/* Chapter descriptions are optional; keep topic access close to the heading. */
.chapter-overview-copy .chapter-description{flex-shrink:0;margin:0 0 10px;padding:0;border:0;background:transparent}
.chapter-description>summary{display:flex;align-items:center;gap:5px;width:fit-content;cursor:pointer;list-style:none;color:#63778a;font-size:12px;line-height:1.7;padding:2px 0;user-select:none}
.chapter-description>summary::-webkit-details-marker{display:none}
.chapter-description>summary:focus-visible{outline:2px solid #1681c4;outline-offset:3px;border-radius:3px}
.chapter-description-arrow{display:inline-block;color:#0062a5;font-size:18px;line-height:1;transition:transform .15s}
.chapter-description[open] .chapter-description-arrow{transform:rotate(180deg)}
.chapter-description .chapter-overview-intro{margin:6px 0 0}

/* The selected portrait mode must also govern dialogs on wide Android screens. */
body.portrait-mode dialog.chapter-overview-dialog{padding:0;box-sizing:border-box;height:min(760px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.portrait-mode .chapter-overview-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:min(23dvh,210px) minmax(0,1fr);height:100%;min-height:0;max-height:none}
body.portrait-mode .chapter-overview-art{height:auto;min-height:0}
body.portrait-mode .chapter-overview-copy{padding:18px;min-width:0}
body.portrait-mode .chapter-overview-copy h2{font-size:16px;line-height:1.65;margin-bottom:8px}
body.portrait-mode .chapter-overview-intro{font-size:12px}
body.portrait-mode .chapter-overview-tabs{margin-bottom:10px}

/* Thin navigation controls; a visible previous-step border on every device. */
.lesson-previous-short{display:none}
.lesson-grid .lesson-navigation:has(#lesson-next)>#lesson-previous{border:1px solid #6b7280;opacity:1}
.lesson-grid .lesson-navigation:has(#lesson-next)>#lesson-previous:hover{border-color:#4b5563}
.lesson-grid .lesson-navigation:has(#lesson-next)>#lesson-previous:disabled{color:#7b8491;cursor:not-allowed;border-color:#6b7280}
@media(max-width:760px){
.lesson-grid .lesson-navigation:has(#lesson-next){gap:6px}
.lesson-grid .lesson-navigation:has(#lesson-next)>button,.lesson-grid .lesson-navigation:has(#lesson-next)>.lesson-next-target>button{height:34px;min-height:34px;max-height:34px;padding:4px 3px;margin:0;gap:3px;font-size:11px;line-height:1.4;white-space:nowrap;flex-wrap:nowrap;justify-content:center;border-width:1px;border-radius:8px;box-sizing:border-box}
.lesson-grid .lesson-navigation:has(#lesson-next) .lesson-previous-full{display:none}
.lesson-grid .lesson-navigation:has(#lesson-next) .lesson-previous-short{display:inline}
.lesson-grid .lesson-navigation:has(#lesson-next) .ui-icon{display:none}
}

body.portrait-mode .lesson-grid .lesson-navigation:has(#lesson-next){gap:6px}
body.portrait-mode .lesson-grid .lesson-navigation:has(#lesson-next)>button,body.portrait-mode .lesson-grid .lesson-navigation:has(#lesson-next)>.lesson-next-target>button{height:34px;min-height:34px;max-height:34px;padding:4px 3px;margin:0;gap:3px;font-size:11px;line-height:1.4;white-space:nowrap;flex-wrap:nowrap;justify-content:center;border-width:1px;border-radius:8px;box-sizing:border-box}
body.portrait-mode .lesson-grid .lesson-navigation:has(#lesson-next) .lesson-previous-full{display:none}
body.portrait-mode .lesson-grid .lesson-navigation:has(#lesson-next) .lesson-previous-short{display:inline}
body.portrait-mode .lesson-grid .lesson-navigation:has(#lesson-next) .ui-icon{display:none}

.lesson-breadcrumb .breadcrumb-label{display:inline-flex;align-items:center;gap:5px;min-width:0}
.lesson-breadcrumb .breadcrumb-book{flex:0 0 15px;width:15px;height:15px}
.lesson-breadcrumb .breadcrumb-book svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}

/* Keep the route short; show the full numbered topic immediately above playback. */
.lesson-current-topic{margin:0 0 8px;font-size:16px;line-height:1.8;font-weight:700;color:#07395f;text-align:right;overflow-wrap:anywhere;min-width:0}
@media(max-width:760px){.lesson-grid>.lesson-main>.lesson-current-topic{order:2;margin:0;font-size:14px}.lesson-grid>.lesson-main>.video-panel{order:2}}
body.portrait-mode .lesson-grid>.lesson-main>.lesson-current-topic{order:2;margin:0;font-size:14px}

/* RTL reading order: number at the right, then its full stop at the left. */
.quiz-question-number{display:inline-flex;flex-direction:row;direction:rtl;unicode-bidi:isolate;align-items:baseline;gap:0;white-space:nowrap;vertical-align:baseline}
.quiz-question-number>.quiz-question-digit{direction:ltr;unicode-bidi:isolate;order:0}
.quiz-question-number>.quiz-question-dot{direction:ltr;unicode-bidi:isolate;order:1}

/* A summary first, with optional details instead of repeated warning sentences. */
.lesson-grid .video-missing-ranges{padding:9px 11px;border-color:#e6ce94;background:#fffbf2;border-radius:9px}
.video-gap-overview{display:flex;align-items:center;justify-content:space-between;gap:10px}
.video-gap-copy{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 10px;min-width:0}
.video-gap-copy strong{font-size:12px;line-height:1.7;font-weight:600}
.video-gap-copy>span{font-size:11px;color:#806b42;white-space:nowrap}
.video-gap-overview>[data-gap-first]{flex-shrink:0;min-height:30px;padding:4px 10px;font-size:11px;line-height:1.5;white-space:nowrap;margin:0}
.video-gap-details{margin-top:5px}
.video-gap-details>summary{font-size:11px;line-height:1.7;cursor:pointer;color:#6f654f;width:fit-content}
.video-gap-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:5px;margin-top:7px}
.video-missing-ranges .video-gap-time{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:4px 8px;min-height:29px;font-size:11px;border:1px solid #e3dac5;border-radius:6px;background:#fffdf8;color:#625238;margin:0}
.video-gap-time:hover{border-color:#b89857;background:#fff5dd}
@media(max-width:420px){.video-gap-copy{display:block}.video-gap-copy>span{display:block}.video-gap-overview{gap:6px}.video-gap-overview>[data-gap-first]{padding:4px 7px}}

.lesson-grid #video-threshold-warning{color:#c62828;font-size:13px;font-weight:600;line-height:1.85}
dialog.continuation-dialog,body.portrait-mode dialog.continuation-dialog{width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:fit-content;min-height:0;margin:auto;max-height:calc(100dvh - 32px);padding:16px;box-sizing:border-box;overflow:auto}
dialog.continuation-dialog[open]{display:block}
.continuation-dialog .modal-head{margin:0 0 10px;gap:8px}
.continuation-dialog .modal-head h2{font-size:17px;line-height:1.5}
.continuation-dialog .modal-head .icon-button{width:32px;height:32px;min-height:32px;padding:0}
.continuation-dialog>p{margin:8px 0;line-height:1.8}
.continuation-dialog .lesson-navigation{gap:8px;margin:10px 0 0}
.continuation-dialog .lesson-navigation button{min-height:36px;padding:7px 12px;font-size:12px;line-height:1.6}
.continuation-dialog .lesson-navigation .quiz-entry{gap:4px}
.continuation-dialog .quiz-passed-note{margin:0;text-align:center;color:#247049;font-size:12px;line-height:1.8}
.continuation-dialog .chapter-presentation-note{margin:0;font-size:11px}
.continuation-dialog>:last-child{margin-bottom:0}

.system-report-panel [data-error-priority][hidden]{display:none!important}

.header-app-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.android-app-download{display:flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid #1273a7;border-radius:9px;background:#f4fbff;color:#07527a;text-decoration:none;font-size:12px;line-height:1.3;white-space:nowrap}
.android-app-download img{object-fit:contain;border-radius:6px}.android-app-download small{display:block;font-size:10px;color:#526c79;margin-top:2px}
@media(max-width:600px){.header-app-actions{gap:5px}.android-app-download{padding:4px 6px;font-size:11px;gap:4px}.android-app-download img{width:25px;height:25px}.workspace>header{flex-wrap:wrap;row-gap:6px}}

.header-app-actions>.orientation-switch{position:static;transform:none;flex-shrink:0}
@media(max-width:480px){.workspace>header,body.portrait-mode .workspace>header{height:auto;min-height:66px;padding:8px 12px;flex-wrap:wrap}.header-app-actions{order:3;width:100%;flex-wrap:nowrap}}

.android-app-download{font-size:12px;font-weight:600;gap:8px;padding:4px 9px}
.android-app-download img{width:48px;height:48px;flex-shrink:0}.android-app-download small{font-size:10px;font-weight:400}
@media(max-width:600px){.android-app-download{font-size:11px;gap:5px;padding:4px 6px}.android-app-download img{width:44px;height:44px}}

.android-app-download,.android-app-download:hover,.android-app-download:active{border:0;background:transparent;box-shadow:none;border-radius:0;padding:0;color:#07527a}
.android-app-download:focus-visible{outline:2px solid #1273a7;outline-offset:3px}

.android-app-download{flex-direction:row-reverse}
.android-app-label{display:flex;flex-direction:column;text-align:right;line-height:1.6;direction:rtl}

dialog.stage-quiz-prompt,body.portrait-mode dialog.stage-quiz-prompt{width:min(440px,calc(100vw - 28px));max-width:calc(100vw - 28px);height:fit-content;min-height:0;max-height:calc(100dvh - 28px);padding:20px;box-sizing:border-box;text-align:center;overflow:auto}
dialog.stage-quiz-prompt[open]{display:block}
.stage-quiz-prompt>.modal-head{position:relative;display:flex;justify-content:center;margin:0 0 16px;padding:0 34px;min-height:32px}
.stage-quiz-prompt>.modal-head h2{width:100%;margin:0;font-size:18px;line-height:1.7;text-align:center}
.stage-quiz-prompt>.modal-head .icon-button{position:absolute;left:0;top:0;width:32px;height:32px;min-height:32px;padding:0}
.stage-quiz-prompt>p{text-align:center;margin:10px 0;line-height:1.9}
.stage-quiz-prompt>.stage-quiz-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.stage-quiz-prompt>.stage-quiz-actions button{margin:0;min-height:40px;padding:8px 15px;text-align:center}
@media(max-width:480px){dialog.stage-quiz-prompt,body.portrait-mode dialog.stage-quiz-prompt{padding:16px}.stage-quiz-prompt>.modal-head h2{font-size:17px}}

dialog.quiz-passed-dialog,body.portrait-mode dialog.quiz-passed-dialog{width:min(560px,calc(100vw - 28px));max-width:calc(100vw - 28px);height:fit-content;min-height:0;max-height:calc(100dvh - 28px);padding:22px;background:linear-gradient(155deg,#f1fcf3,#ddf4e5);color:#145b37;border:1px solid #a6d9b7;box-sizing:border-box;overflow:auto}
.quiz-passed-dialog>.modal-head{position:relative;justify-content:center;padding:0 36px;margin-bottom:8px;min-height:32px}.quiz-passed-dialog>.modal-head h2{text-align:center;font-size:18px;color:#17653c}.quiz-passed-dialog>.modal-head .icon-button{position:absolute;left:0;top:0;width:32px;height:32px;min-height:32px;padding:0;color:#226443;background:#ffffffa6}
.quiz-passed-dialog .result.success{background:transparent;border:0;margin:0;padding:8px 10px 16px;text-align:center}
.quiz-success-badge{width:82px;height:82px;margin:0 auto 12px}.quiz-success-badge svg{width:100%;height:100%;fill:#239653;filter:drop-shadow(0 4px 6px #1665341a)}.quiz-success-check{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.quiz-passed-dialog .quiz-success-title{margin:0 0 8px;font-size:24px;line-height:1.6;color:#145b37}.quiz-passed-dialog .quiz-success-message{margin:0 auto 16px;max-width:390px;line-height:1.9;color:#2d6747}.quiz-score-label{display:block;font-size:12px;color:#47765a}.quiz-passed-dialog .result strong{display:block;color:#126335;font-size:42px;line-height:1.5}
.quiz-passed-dialog .quiz-answer-counts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:12px 0}.quiz-passed-dialog .quiz-answer-counts>span{background:#ffffffc9;border:1px solid #b9dec6;border-radius:9px;padding:6px 12px}.quiz-passed-dialog .result>p:last-child{font-size:12px;line-height:1.8;color:#356b4b}
.quiz-passed-dialog>.quiz-perfect{text-align:center;color:#17653c;font-weight:600}.quiz-passed-dialog>.feedback{background:#fffffff0;border:1px solid #b8ddc4;border-radius:12px;padding:12px;color:#244c36}.quiz-passed-dialog>h3{font-size:15px;color:#235e3c}.quiz-passed-dialog>.actions{justify-content:center;flex-wrap:wrap;margin-top:18px}.quiz-passed-dialog #quiz-done{background:#187c43;border:1px solid #126b38;color:#fff;min-width:180px;min-height:44px}.quiz-passed-dialog #quiz-done:hover{background:#126b38}
@media(max-width:480px){dialog.quiz-passed-dialog,body.portrait-mode dialog.quiz-passed-dialog{padding:16px}.quiz-passed-dialog .quiz-success-title{font-size:21px}.quiz-success-badge{width:70px;height:70px}.quiz-passed-dialog .quiz-success-message{font-size:12px}}

.path-actions-grid .toolkit-link-card{background:#ebf2fa}
.path-actions-grid .toolkit-link-card .tool-notes{background:#fff}
.path-actions-grid .ranking-card{height:auto;min-height:340px;max-height:none;overflow:visible}
.path-actions-grid .ranking-card #ranking{flex:initial;height:auto;max-height:none;overflow:visible}

/* The app link belongs to the account actions at the left of the header. */
.workspace>header>.user-chip{margin-inline-start:auto;min-width:0;gap:10px;flex-wrap:nowrap}
.user-chip>.header-app-actions{order:0;width:auto;flex:0 0 auto;flex-wrap:nowrap}
.user-chip>.header-app-actions .android-app-download{flex-shrink:0}
@media(max-width:480px){.workspace>header,body.portrait-mode .workspace>header{padding:8px;gap:6px;flex-wrap:wrap}.workspace>header>.user-chip{gap:7px}.user-chip>.header-app-actions{order:0;width:auto}.user-chip .android-app-download img{width:40px;height:40px}.user-chip .android-app-label{font-size:10px}}

.admin-access-control{display:flex;flex-direction:column;gap:2px;font-size:10px;line-height:1.4;flex-shrink:0}.admin-access-control select{font:inherit;font-size:11px;width:132px;min-height:32px;padding:4px 7px;background:#edf6fc;color:#07527d;border:1px solid #7ab4da;border-radius:8px}.admin-access-control:has(option[value="unlocked"]:checked) select{background:#fff4d5;border-color:#d49b22;color:#754d00}@media(max-width:480px){.admin-access-control select{width:111px;font-size:10px}.user-chip{gap:5px}}