/* ฟอนต์ไทย: วางไฟล์ใน learning-app/fonts/ ตาม fonts/README.txt */
@font-face {
  font-family: "DB Helvethaica X";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../../fonts/DB%20HELVETHAICA%20X%20LI.TTF") format("truetype");
}

@font-face {
  font-family: "DB Helvethaica X";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/DB_HELVETHAICA_X-WEBFONT.TTF") format("truetype");
}

@font-face {
  font-family: "DB Helvethaica X";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/DB_HELVETHAICA_X_MED-WEBFONT.TTF") format("truetype");
}

@font-face {
  font-family: "DB Helvethaica X";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/DB%20HELVETHAICA%20X%20BD%20V3.2.TTF") format("truetype");
}

/* หัวข้อใหญ่ — Heavent เน้นคาแรกเตอร์โปสเตอร์ (ถ้าไม่มีไฟล์จะ fallback เป็น Helvethaica) */
@font-face {
  font-family: "DB Heavent";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/DB%20HEAVENT%20MED%20IT%20V3.2.1.TTF") format("truetype");
}

:root {
  --bg: #0f1419;
  --surface: #1a2332;
  --surface2: #243044;
  --text: #e8eef6;
  --muted: #9aa8bc;
  --accent: #3b82f6;
  --accent2: #22c55e;
  --danger: #f87171;
  --radius: 12px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  /* เนื้อหา + ฟอร์ม: Helvethaica อ่านง่าย; ภาษาอังกฤษใช้ fallback ระบบ */
  --font: "DB Helvethaica X", "Sarabun", "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "DB Heavent", "DB Helvethaica X", "Sarabun", "Kanit", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body.kmu7-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: linear-gradient(160deg, #0f1419 0%, #1a2744 45%, #0f172a 100%);
  color: var(--text);
  line-height: 1.55;
}

/* —— Admin dashboard (glass + WordPress header/footer) —— */
.kmu7-admin-page {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.22) 0%, rgba(2, 6, 23, 0.34) 55%, rgba(2, 6, 23, 0.52) 100%),
    url("https://eesh.kmutt.ac.th/wp-content/uploads/2026/01/EES_9834.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}
.kmu7-admin-shell {
  max-width: 1100px;
}
.kmu7-admin-glass {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(17, 24, 39, 0.34);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 70px rgba(2, 6, 23, 0.45);
  padding: clamp(1.2rem, 3vw, 1.9rem);
}
.kmu7-admin-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.kmu7-admin-title {
  margin: 0 0 0.15rem;
  line-height: 1.08;
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
}
.kmu7-admin-lead {
  margin: 0;
  color: rgba(248, 250, 252, 0.82);
  font-size: 1.25em;
  font-weight: 400;
}
.kmu7-admin-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.kmu7-admin-group {
  margin-top: 1.1rem;
}
.kmu7-admin-group-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.92);
}
.kmu7-admin-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .kmu7-admin-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .kmu7-admin-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.kmu7-admin-card {
  display: flex;
  gap: 0.85rem;
  padding: 1.05rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  min-height: 5.2rem;
}
.kmu7-admin-card:hover:not(.is-soon) {
  transform: translateY(-1px);
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.38);
}
.kmu7-admin-card.is-soon {
  opacity: 0.72;
  cursor: not-allowed;
}
.kmu7-admin-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.kmu7-admin-card__title {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.2;
}
.kmu7-admin-card__desc {
  font-size: 0.95rem;
  color: rgba(248, 250, 252, 0.78);
  line-height: 1.3;
}
.kmu7-admin-card__soon {
  margin-top: 0.2rem;
  font-size: 0.86rem;
  color: rgba(248, 250, 252, 0.72);
}

/* Admin card icons (SVG mask; color follows currentColor). */
.kmu7-admin-card__icon {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kmu7-admin-card__icon::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(248, 250, 252, 0.92);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  display: block;
}
.kmu7-admin-ic--users::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 11a4 4 0 1 0-3.999-4A4 4 0 0 0 16 11zM8 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.866 0-8 1.933-8 5v1h10v-1c0-1.02.288-1.97.79-2.79C10.3 13.4 9.1 13 8 13zm8 0c-2.76 0-8 1.38-8 4.2V20h16v-2.8C24 14.38 18.76 13 16 13z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 11a4 4 0 1 0-3.999-4A4 4 0 0 0 16 11zM8 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.866 0-8 1.933-8 5v1h10v-1c0-1.02.288-1.97.79-2.79C10.3 13.4 9.1 13 8 13zm8 0c-2.76 0-8 1.38-8 4.2V20h16v-2.8C24 14.38 18.76 13 16 13z'/></svg>");
}
.kmu7-admin-ic--org::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 21V3h18v18H3zm2-2h14V5H5v14zm2-8h2v2H7v-2zm0-4h2v2H7V7zm0 8h2v2H7v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 21V3h18v18H3zm2-2h14V5H5v14zm2-8h2v2H7v-2zm0-4h2v2H7V7zm0 8h2v2H7v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z'/></svg>");
}
.kmu7-admin-ic--dept::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 1 7l11 5 9-4.09V17h2V7L12 2zm0 8.18L4.24 7 12 3.82 19.76 7 12 10.18zM3 10v8l9 4 9-4v-8l-9 4-9-4zm9 10-7-3.11v-4.76l7 3.11 7-3.11v4.76L12 20z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 1 7l11 5 9-4.09V17h2V7L12 2zm0 8.18L4.24 7 12 3.82 19.76 7 12 10.18zM3 10v8l9 4 9-4v-8l-9 4-9-4zm9 10-7-3.11v-4.76l7 3.11 7-3.11v4.76L12 20z'/></svg>");
}
.kmu7-admin-ic--course::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v2H4V4zm0 4h10v2H4V8zm0 4h16v2H4v-2zm0 4h10v2H4v-2zm12-7 6 3-6 3V9z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v2H4V4zm0 4h10v2H4V8zm0 4h16v2H4v-2zm0 4h10v2H4v-2zm12-7 6 3-6 3V9z'/></svg>");
}
.kmu7-admin-ic--quiz::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM7 12h10v2H7v-2zm0 4h10v2H7v-2zm0-8h6v2H7V8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM7 12h10v2H7v-2zm0 4h10v2H7v-2zm0-8h6v2H7V8z'/></svg>");
}
.kmu7-admin-ic--report::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h16v18H4V3zm2 2v14h12V5H6zm2 10h2v2H8v-2zm0-6h2v5H8V9zm4 3h2v5h-2v-5zm4-2h2v7h-2V10z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h16v18H4V3zm2 2v14h12V5H6zm2 10h2v2H8v-2zm0-6h2v5H8V9zm4 3h2v5h-2v-5zm4-2h2v7h-2V10z'/></svg>");
}
.kmu7-admin-ic--cert::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10v2h2v18H5V4h2V2zm0 4v14h10V6H7zm2 2h6v2H9V8zm0 4h6v2H9v-2zm0 4h4v2H9v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10v2h2v18H5V4h2V2zm0 4v14h10V6H7zm2 2h6v2H9V8zm0 4h6v2H9v-2zm0 4h4v2H9v-2z'/></svg>");
}
.kmu7-admin-ic--card::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2H3V6zm0 4h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8zm4 3h6v2H7v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2H3V6zm0 4h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8zm4 3h6v2H7v-2z'/></svg>");
}
.kmu7-admin-ic--profile::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z'/></svg>");
}

/* —— Admin home (match user mockup) —— */
.kmu7-admin-home {
  background: #ffffff;
  color: #0f172a;
  min-height: 100vh;
}
/* Force DB font on every text element of the admin home (overrides Vamtam). */
.kmu7-admin-home,
.kmu7-admin-home :is(h1, h2, h3, p, span, a, button, label, input, select, textarea, div) {
  font-family: var(--font) !important;
}
/* Standard centered container — not stretched to the full screen. */
/* Layout: sidebar ซ้าย + เนื้อหาขวา (เฉพาะหน้า admin home) */
.kmu7-admin-home .kmu7-admin-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: 100vh;
  background: #f6f7fb;
}
@media (max-width: 980px) {
  .kmu7-admin-home .kmu7-admin-layout {
    grid-template-columns: 280px 1fr;
  }
}
@media (max-width: 820px) {
  .kmu7-admin-home .kmu7-admin-layout {
    grid-template-columns: 1fr;
  }
}

.kmu7-admin-home .kmu7-admin-sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(15, 23, 42, 0.10);
  padding: 1.1rem 1rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
@media (max-width: 820px) {
  .kmu7-admin-home .kmu7-admin-sidebar {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  }
}

.kmu7-admin-home .kmu7-admin-sidebar__top {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.4rem 0.25rem 1.0rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 1rem;
}
.kmu7-admin-home .kmu7-admin-sidebar__logo {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(34, 197, 94, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kmu7-admin-home .kmu7-admin-sidebar__logo img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
}
.kmu7-admin-home .kmu7-admin-sidebar__app {
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0f172a;
  font-size: 1.18rem;
  line-height: 1.05;
}
.kmu7-admin-home .kmu7-admin-sidebar__user {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(15, 23, 42, 0.70);
  font-size: 1.02rem;
  font-weight: 500;
}
.kmu7-admin-home .kmu7-admin-sidebar__user i {
  color: #16a34a;
}

.kmu7-admin-home .kmu7-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.kmu7-admin-home .kmu7-admin-nav__group {
  padding: 0 0.2rem;
}
.kmu7-admin-home .kmu7-admin-nav__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: rgba(15, 23, 42, 0.72);
  margin: 0 0 0.45rem;
}
.kmu7-admin-home .kmu7-admin-nav__items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.kmu7-admin-home .kmu7-admin-nav__link {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.62rem 0.7rem;
  border-radius: 12px;
  text-decoration: none;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.02);
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.kmu7-admin-home .kmu7-admin-nav__link:hover:not(.is-soon) {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.22);
  transform: translateY(-1px);
}
.kmu7-admin-home .kmu7-admin-nav__link.is-soon {
  opacity: 0.62;
  cursor: not-allowed;
}
.kmu7-admin-home .kmu7-admin-nav__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #16a34a;
}
.kmu7-admin-home .kmu7-admin-nav__icon i {
  font-size: 1rem;
}
.kmu7-admin-home .kmu7-admin-nav__label {
  font-weight: 650;
  font-size: 1.08rem;
}
.kmu7-admin-home .kmu7-admin-nav__badge {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.kmu7-admin-home .kmu7-admin-sidebar__bottom {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.kmu7-admin-home .kmu7-admin-sidebar__logout {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.06);
  color: #991b1b;
  font-weight: 800;
}
.kmu7-admin-home .kmu7-admin-sidebar__logout:hover {
  background: rgba(239, 68, 68, 0.10);
}

.kmu7-admin-home .kmu7-admin-content {
  padding: 1.35rem clamp(1rem, 3vw, 2.1rem);
}
.kmu7-admin-home .kmu7-admin-content__inner {
  max-width: 1200px;
}
.kmu7-admin-home .kmu7-admin-hero {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  padding: 1.25rem 1.25rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.kmu7-admin-home .kmu7-admin-hero__title {
  font-size: clamp(2rem, 2.3vw, 2.5rem);
  font-weight: 900;
  line-height: 1.06;
  color: #0f172a;
}
.kmu7-admin-home .kmu7-admin-hero__subtitle {
  margin-top: 0.25rem;
  color: rgba(15, 23, 42, 0.62);
  font-size: 1.25rem;
  font-weight: 400;
}

.kmu7-admin-home .kmu7-admin-panels {
  margin-top: 1rem;
}
.kmu7-admin-home .kmu7-admin-panels__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 700px) {
  .kmu7-admin-home .kmu7-admin-panels__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .kmu7-admin-home .kmu7-admin-panels__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.kmu7-admin-home .kmu7-admin-panel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #ffffff;
  text-decoration: none;
  color: #0f172a;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.kmu7-admin-home .kmu7-admin-panel:hover {
  transform: translateY(-1px);
  border-color: rgba(22, 163, 74, 0.22);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}
.kmu7-admin-home .kmu7-admin-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 163, 74, 0.10);
  border: 1px solid rgba(22, 163, 74, 0.18);
  color: #15803d;
}
.kmu7-admin-home .kmu7-admin-panel__icon i {
  font-size: 1.25rem;
}
.kmu7-admin-home .kmu7-admin-panel__label {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.15;
}

/* Tile icons (SVG mask). */
.kmu7-ico--users {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 11a4 4 0 1 0-3.999-4A4 4 0 0 0 16 11zM8 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.866 0-8 1.933-8 5v1h10v-1c0-1.02.288-1.97.79-2.79C10.3 13.4 9.1 13 8 13zm8 0c-2.76 0-8 1.38-8 4.2V20h16v-2.8C24 14.38 18.76 13 16 13z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 11a4 4 0 1 0-3.999-4A4 4 0 0 0 16 11zM8 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0 2c-3.866 0-8 1.933-8 5v1h10v-1c0-1.02.288-1.97.79-2.79C10.3 13.4 9.1 13 8 13zm8 0c-2.76 0-8 1.38-8 4.2V20h16v-2.8C24 14.38 18.76 13 16 13z'/></svg>");
}
.kmu7-ico--org {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 21V3h18v18H3zm2-2h14V5H5v14zm2-8h2v2H7v-2zm0-4h2v2H7V7zm0 8h2v2H7v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 21V3h18v18H3zm2-2h14V5H5v14zm2-8h2v2H7v-2zm0-4h2v2H7V7zm0 8h2v2H7v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm4-8h2v2h-2V7zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z'/></svg>");
}
.kmu7-ico--course {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v2H4V4zm0 4h10v2H4V8zm0 4h16v2H4v-2zm0 4h10v2H4v-2zm12-7 6 3-6 3V9z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16v2H4V4zm0 4h10v2H4V8zm0 4h16v2H4v-2zm0 4h10v2H4v-2zm12-7 6 3-6 3V9z'/></svg>");
}
.kmu7-ico--quiz {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM7 12h10v2H7v-2zm0 4h10v2H7v-2zm0-8h6v2H7V8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM7 12h10v2H7v-2zm0 4h10v2H7v-2zm0-8h6v2H7V8z'/></svg>");
}
.kmu7-ico--report {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h16v18H4V3zm2 2v14h12V5H6zm2 10h2v2H8v-2zm0-6h2v5H8V9zm4 3h2v5h-2v-5zm4-2h2v7h-2V10z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 3h16v18H4V3zm2 2v14h12V5H6zm2 10h2v2H8v-2zm0-6h2v5H8V9zm4 3h2v5h-2v-5zm4-2h2v7h-2V10z'/></svg>");
}
.kmu7-ico--cert {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10v2h2v18H5V4h2V2zm0 4v14h10V6H7zm2 2h6v2H9V8zm0 4h6v2H9v-2zm0 4h4v2H9v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2h10v2h2v18H5V4h2V2zm0 4v14h10V6H7zm2 2h6v2H9V8zm0 4h6v2H9v-2zm0 4h4v2H9v-2z'/></svg>");
}
.kmu7-ico--card {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2H3V6zm0 4h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8zm4 3h6v2H7v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2H3V6zm0 4h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8zm4 3h6v2H7v-2z'/></svg>");
}
.kmu7-ico--api {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2h-2V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2H4V7zm0 6h2v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4h2v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-4zm6-2h4v2h-4v-2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2h-2V7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2H4V7zm0 6h2v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-4h2v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-4zm6-2h4v2h-4v-2z'/></svg>");
}

/* When embedded under WordPress, force DB font inside app container. */
.kmu7-page,
.kmu7-page button,
.kmu7-page input,
.kmu7-page select,
.kmu7-page textarea {
  font-family: var(--font) !important;
}

.kmu7-page .kmu7-title {
  font-family: var(--font-heading) !important;
}

/* —— Pin the WordPress / Elementor header to the top of the viewport ——
   Elementor Pro's "Sticky" motion-effect relies on JS that fails to init
   inside our standalone PHP context. Force position:sticky in CSS so the
   menu stays at the top while scrolling regardless. */
header[data-elementor-type="header"],
.elementor-location-header,
header.site-header,
header#vamtam-header,
.vamtam-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Force DB Helvethaica X font on the embedded WordPress / Elementor header.
   Vamtam's inline CSS variables for theme fonts aren't always printed in our
   standalone context, so we apply DB font directly. */
header[data-elementor-type="header"],
header.site-header,
header#vamtam-header,
.vamtam-header,
header[data-elementor-type="header"] :is(nav, ul, li, a, span, div, p, button),
.elementor-location-header :is(nav, ul, li, a, span, div, p, button),
header.site-header :is(nav, ul, li, a, span, div, p, button),
header#vamtam-header :is(nav, ul, li, a, span, div, p, button),
.vamtam-header :is(nav, ul, li, a, span, div, p, button),
.elementor-nav-menu .elementor-item,
.elementor-nav-menu .elementor-sub-item,
.vamtam-nav-text,
.vamtam-btn-text {
  font-family: "DB Helvethaica X", "Sarabun", "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Never override icon elements — let the theme's icon-font CSS win. */
header[data-elementor-type="header"] i,
header[data-elementor-type="header"] svg,
.elementor-location-header i,
.elementor-location-header svg,
header.site-header i,
header.site-header svg,
header#vamtam-header i,
header#vamtam-header svg,
.vamtam-header i,
.vamtam-header svg {
  font-family: unset !important;
}

/* —— Replace failed Vamtam icon-font glyphs with our own inline SVG icons.
   The theme's `vamtamtheme` font isn't available in our standalone context so
   we render search / contact icons via CSS mask + inline SVG (no extra HTTP
   requests, color follows currentColor). */
.elementor-location-header i.vamtamtheme-,
.elementor-location-header i[class*="vamtamtheme"],
.elementor-location-header i[class*="vamtam-theme-"] {
  font-family: inherit !important;
  font-style: normal !important;
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  line-height: 1 !important;
}

.elementor-location-header i.vamtamtheme-::before,
.elementor-location-header i[class*="vamtamtheme"]::before,
.elementor-location-header i[class*="vamtam-theme-"]::before {
  content: '' !important;
  display: none !important;
}

.elementor-location-header i.vamtam-theme-search {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 2a8 8 0 1 0 5.293 14.293l4.207 4.207 1.414-1.414-4.207-4.207A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 2a8 8 0 1 0 5.293 14.293l4.207 4.207 1.414-1.414-4.207-4.207A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/></svg>");
}

.elementor-location-header i.vamtam-theme-contact {
  /* +15% over the base 1.1em → ~1.27em so it matches the search icon visually. */
  width: 1.27em;
  height: 1.27em;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v.4l8 5 8-5V6H4zm0 2.6V18h16V8.6l-8 5-8-5z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2v.4l8 5 8-5V6H4zm0 2.6V18h16V8.6l-8 5-8-5z'/></svg>");
}

/* Vertically center the right-side widgets (search icon | Get in touch button)
   so the magnifier, divider and envelope+text all sit on the same line.
   The button widget is taller than the bare-icon widget, so we stretch every
   widget in the row to the same height and center their contents. */
.elementor-location-header .elementor-widget-wrap {
  align-items: stretch !important;
  align-content: stretch !important;
}
.elementor-location-header .elementor-widget-icon,
.elementor-location-header .elementor-widget-button {
  display: inline-flex !important;
  align-items: center !important;
  align-self: stretch !important;
}
.elementor-location-header .elementor-widget-icon > .elementor-widget-container,
.elementor-location-header .elementor-widget-button > .elementor-widget-container {
  display: inline-flex !important;
  align-items: center !important;
  height: 100%;
}
.elementor-location-header .elementor-icon-wrapper,
.elementor-location-header .elementor-button-wrapper,
.elementor-location-header .elementor-button-content-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  height: 100%;
}
/* The <a class="elementor-icon"> wrapping the search glyph is inline by default;
   make it flex so its child <i> can sit dead-center vertically. */
.elementor-location-header a.elementor-icon,
.elementor-location-header span.elementor-button-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
/* Match the standalone search icon size to the button's envelope icon. */
.elementor-location-header .elementor-widget-icon i.vamtam-theme-search {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}

/* Menu text size: bump menu items to 1.75em (per user request).
   IMPORTANT: only set on the outer link, NOT on `.vamtam-nav-text` too —
   otherwise em compounds (parent 1.75em × child 1.75em ≈ 3em → huge text).
   CTA "Get in touch" sized separately below. */
.elementor-location-header .elementor-nav-menu .elementor-item,
.elementor-location-header .elementor-nav-menu .elementor-sub-item {
  font-size: 1.75em !important;
}
.elementor-location-header .vamtam-nav-text,
.elementor-location-header .vamtam-nav-text-wrap {
  font-size: 1em !important; /* inherit the outer 1.75em — don't multiply */
}

/* CTA "Get in touch": +15% from previous 1.5em → ~1.725em. */
.elementor-location-header .elementor-button-text .vamtam-btn-text,
.elementor-location-header .vamtam-btn-text {
  font-size: 1.725em !important;
}

/* Reduce white header background height by ~10%: tighten padding/line-height. */
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-column-gap-no {
  min-height: 0 !important;
}

.elementor-location-header .elementor-container {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

.elementor-location-header .elementor-nav-menu--main .elementor-item,
.elementor-location-header .elementor-nav-menu--main .elementor-sub-item {
  line-height: 1.05 !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

/* Standard sub-menu fallback (works for items like "เกี่ยวกับ" → 2 children).
   For megamenu items (การจัดการ / งานบริการ / ผลงาน) the panel content is
   loaded by Vamtam JS on hover and isn't in the DOM, so it stays unavailable
   in our standalone page — clicking the parent still navigates to the page. */
.elementor-location-header .menu-item-has-children:hover > .sub-menu,
.elementor-location-header .menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* —— Auth page (login/signup) — glassmorphism on EESH photo ——
   พื้นหลังภาพอาคาร + overlay บางๆ และกล่องล็อกอินแบบกระจกฝ้าใส */
.kmu7-auth-page {
  --auth-text: #f8fafc;
  --auth-muted: rgba(248, 250, 252, 0.78);
  --auth-border: rgba(255, 255, 255, 0.28);
  --auth-input-bg: rgba(255, 255, 255, 0.12);
  --auth-input-bg-focus: rgba(255, 255, 255, 0.20);
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.32) 0%, rgba(2, 6, 23, 0.40) 55%, rgba(2, 6, 23, 0.52) 100%),
    url("https://eesh.kmutt.ac.th/wp-content/uploads/2026/01/GreenU_2018-659-scaled-copy.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--auth-text);
}

/* Register page uses a different background image. */
.kmu7-auth-page.kmu7-auth-page--wide {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.28) 0%, rgba(2, 6, 23, 0.38) 55%, rgba(2, 6, 23, 0.50) 100%),
    url("https://eesh.kmutt.ac.th/wp-content/uploads/2026/01/GreenU_2018-628-scaled.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Forgot-password page uses the GreenU background as requested. */
.kmu7-auth-page.kmu7-auth-page--forgot {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.32) 0%, rgba(2, 6, 23, 0.42) 55%, rgba(2, 6, 23, 0.56) 100%),
    url("https://eesh.kmutt.ac.th/wp-content/uploads/2026/01/DSC05830.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Reset-password page uses its own background image (matches register styling). */
.kmu7-auth-page.kmu7-auth-page--reset {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.28) 0%, rgba(2, 6, 23, 0.40) 55%, rgba(2, 6, 23, 0.54) 100%),
    url("https://eesh.kmutt.ac.th/wp-content/uploads/2026/01/EES_9834.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.kmu7-auth-page .kmu7-main {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
}

.kmu7-auth-page .kmu7-wrap {
  max-width: 480px;
  width: 100%;
}

.kmu7-auth-page.kmu7-auth-page--wide .kmu7-wrap {
  max-width: min(100vw - 1.25rem, 1280px);
}

/* Reset-password: narrower than register (-30%). */
.kmu7-auth-page.kmu7-auth-page--reset .kmu7-wrap {
  max-width: 600px;
}

/* Register subtitle (centered, +20%) — ใช้ร่วมทุกหน้า auth ที่มี subtitle */
.kmu7-auth-page .kmu7-auth-subtitle {
  margin: 0 0 0.75rem;
  text-align: center;
  color: rgba(248, 250, 252, 0.82);
  font-size: 1.44em;
  font-weight: 400;
  line-height: 1.25;
}

/* Two-column layout inside the auth card (stacks on mobile) */
.kmu7-auth-page .kmu7-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .kmu7-auth-page .kmu7-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* Lab row hidden for domestic students: phone spans full grid width */
.kmu7-auth-page .kmu7-inst-lab-phone.kmu7-inst-lab-phone--no-lab #kmu7-field-phone {
  grid-column: 1 / -1;
}

/* User type choices as pill buttons (register — ขึ้นบรรทัดใหม่ได้ ไม่ล้นกรอบ) */
.kmu7-auth-page .kmu7-choice-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: visible;
  gap: 0.5rem 0.55rem;
  margin: 0 0 1.15rem;
}
.kmu7-auth-page .kmu7-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.94rem;
  border-radius: 999px;
  border: 1px solid var(--auth-border);
  background: rgba(255, 255, 255, 0.10);
  color: var(--auth-text);
  cursor: pointer;
  user-select: none;
  font-family: var(--font) !important;
  font-weight: 700;
  font-size: 1.23rem;
  white-space: nowrap;
  line-height: 1.1;
}
.kmu7-auth-page.kmu7-auth-page--wide .kmu7-choice {
  padding: 0.44rem 0.72rem;
  font-size: 1.08rem;
  max-width: 100%;
  text-align: center;
}
.kmu7-auth-page.kmu7-auth-page--wide .kmu7-choice span {
  line-height: 1.2;
}
.kmu7-auth-page .kmu7-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.kmu7-auth-page .kmu7-choice:has(input:checked) {
  background: rgba(255, 255, 255, 0.95);
  color: #0b1220;
  border-color: rgba(255, 255, 255, 0.95);
}
.kmu7-auth-page .kmu7-choice:hover {
  background: rgba(255, 255, 255, 0.16);
}
.kmu7-auth-page .kmu7-choice.is-disabled,
.kmu7-auth-page .kmu7-choice.is-disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.58);
  cursor: not-allowed;
  opacity: 0.72;
}
/* Hints under fields: +15% */
.kmu7-auth-page .kmu7-hint {
  font-size: 1.15em !important;
  color: #ffffff !important;
  font-weight: 300 !important; /* thinner */
  opacity: 0.9;
}

/* Make vertical spacing consistent even when a hint exists:
   reserve space in every field and position the hint absolutely. */
.kmu7-auth-page--wide .kmu7-field {
  padding-bottom: 1.55em; /* +15% spacing so hint doesn't hug the field */
}
.kmu7-auth-page--wide .kmu7-field .kmu7-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
  line-height: 1.25;
}

/* Terms line + policy link: force DB font. */
.kmu7-auth-page .kmu7-check,
.kmu7-auth-page .kmu7-check span,
.kmu7-auth-page .kmu7-inline-link {
  font-family: var(--font) !important;
}

/* Terms line: lighter weight +25% */
.kmu7-auth-page .kmu7-check span {
  font-weight: 400 !important;
  font-size: 1.44em; /* +15% */
  color: #ffffff;
}

/* Align checkbox + terms text vertically (auth page overrides base kmu7-check). */
.kmu7-auth-page .kmu7-check {
  align-items: center !important;
  gap: 0.75rem; /* +15% spacing from checkbox */
}
.kmu7-auth-page .kmu7-check input {
  margin-top: 0 !important;
  align-self: center;
}

/* Keep the terms text aligned with the checkbox */
.kmu7-auth-page .kmu7-check span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.2;
}

/* Make selects readable in auth glass UI (avoid white-on-white dropdown). */
.kmu7-auth-page select.kmu7-select {
  color-scheme: dark;
}
.kmu7-auth-page select.kmu7-select option {
  background: #0b1220;
  color: #f8fafc;
}

/* Custom dropdown chevron for affiliation/department selects:
   move it inward + scale up 20% vs default. */
.kmu7-auth-page--wide #affiliation_select.kmu7-select,
.kmu7-auth-page--wide #department_select.kmu7-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 3.6rem !important; /* space for chevron */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='white' d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.25rem center; /* moved inward */
  background-size: 1.44rem 1.44rem; /* +20% */
}

/* Inline policy link inside terms checkbox */
.kmu7-auth-page .kmu7-inline-link {
  color: rgba(245, 158, 11, 1);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 0.25rem;
}
.kmu7-auth-page .kmu7-inline-link:hover {
  color: #ffffff;
}

/* Frosted-glass card — เห็นพื้นหลังจาง ๆ ผ่านการ์ดได้
   ใช้ specificity .kmu7-auth-page .kmu7-auth-card เพื่อกัน .kmu7-card ทับสีพื้นหลัง.
   เบลอลด 20% (22px -> 17.6px) ตามคำขอผู้ใช้. */
.kmu7-auth-page .kmu7-auth-card,
.kmu7-page.kmu7-auth-page .kmu7-card.kmu7-auth-card {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(17.6px) saturate(150%);
  -webkit-backdrop-filter: blur(17.6px) saturate(150%);
  border: 1px solid var(--auth-border);
  border-radius: 22px;
  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.45);
  padding: 2rem 1.6rem;
  color: var(--auth-text);
}

@media (min-width: 480px) {
  .kmu7-auth-page .kmu7-auth-card {
    padding: 2.4rem 2rem;
  }
}

/* Title: ไม่เอียง ใหญ่ขึ้น 15% (จาก 2rem -> 2.3rem) */
.kmu7-auth-page .kmu7-title.kmu7-auth-title {
  text-align: center;
  font-family: "DB Helvethaica X", "Sarabun", "Kanit", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--auth-text);
  margin: 0 0 1.75rem;
}

/* หน้าลงทะเบียน (ไทย/อังกฤษ): หัวข้อกับคำอธิบายชิดกัน */
.kmu7-auth-page.kmu7-auth-page--wide .kmu7-title.kmu7-auth-title {
  font-size: 3.59rem;
  margin: 0 0 0.12rem;
  line-height: 1.05;
}

.kmu7-auth-page.kmu7-auth-page--wide .kmu7-auth-subtitle {
  margin: 0 0 0.85rem;
  line-height: 1.2;
}

.kmu7-auth-page .kmu7-lang {
  color: var(--auth-muted);
}

.kmu7-auth-page .kmu7-lang__link {
  color: var(--auth-muted);
  font-size: 1.55em; /* +15% (from 1.35em) */
}

.kmu7-auth-page .kmu7-lang__sep {
  font-size: 1.55em;
}

.kmu7-auth-page .kmu7-lang__link:hover {
  color: var(--auth-text);
  background: rgba(255, 255, 255, 0.10);
}

.kmu7-auth-page .kmu7-lang__link.is-active {
  color: var(--auth-text);
}

/* Field spacing — เว้นบรรทัดสบายตา */
.kmu7-auth-page .kmu7-field {
  margin-bottom: 1.4rem;
  position: relative; /* anchor for the right-side icon */
}

/* Visually hide the <label> while keeping it for screen readers — the visual
   "label" is provided by the input's placeholder, matching the reference UI. */
.kmu7-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Inputs: เพิ่มขนาดตัวอักษร 20% (1rem -> 1.2rem) + แคปซูล + ระยะนิ่ง.
   padding-right เผื่อพื้นที่ให้ไอคอนทางขวาในกรอบ (.kmu7-field-icon).
   ใช้ !important เพราะ Vamtam theme ใส่ rule กับ body input[type=...] specificity
   สูงกว่าคลาสของเราในบางบริบท. */
.kmu7-page.kmu7-auth-page .kmu7-input,
.kmu7-page.kmu7-auth-page .kmu7-select,
.kmu7-page.kmu7-auth-page .kmu7-textarea,
.kmu7-auth-page input.kmu7-input,
.kmu7-auth-page select.kmu7-select,
.kmu7-auth-page textarea.kmu7-textarea {
  background: var(--auth-input-bg) !important;
  border: 1px solid var(--auth-border) !important;
  color: var(--auth-text) !important;
  border-radius: 999px !important;
  padding: 0.75rem 3.0rem 0.75rem 1.3rem !important; /* -25% height */
  font-size: 1.32rem !important; /* +10% per user request */
  line-height: 1.4 !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kmu7-auth-page .kmu7-input::placeholder,
.kmu7-auth-page input.kmu7-input::placeholder {
  color: rgba(248, 250, 252, 0.78) !important;
  opacity: 1 !important;
  font-size: 1.32rem !important;
}

/* Auth inputs wrap: ไอคอนทางขวาในกรอบแคปซูล */
.kmu7-auth-page .kmu7-input-wrap {
  position: relative;
}

/* Reset-password inputs wrap: keep icons vertically centered on the input
   even when hints below toggle on/off. */
.kmu7-auth-page.kmu7-auth-page--reset .kmu7-input-wrap .kmu7-field-icon {
  top: 50%;
  transform: translateY(-50%);
}

.kmu7-page.kmu7-auth-page .kmu7-password-toggle,
.kmu7-page.kmu7-auth-page button.kmu7-password-toggle {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  color: rgba(248, 250, 252, 0.92) !important;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.kmu7-page.kmu7-auth-page .kmu7-password-toggle:hover,
.kmu7-page.kmu7-auth-page button.kmu7-password-toggle:hover {
  opacity: 1;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}

.kmu7-page.kmu7-auth-page .kmu7-password-toggle:focus,
.kmu7-page.kmu7-auth-page .kmu7-password-toggle:focus-visible,
.kmu7-page.kmu7-auth-page button.kmu7-password-toggle:focus,
.kmu7-page.kmu7-auth-page button.kmu7-password-toggle:focus-visible {
  opacity: 1;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kmu7-page.kmu7-auth-page .kmu7-password-toggle i,
.kmu7-page.kmu7-auth-page button.kmu7-password-toggle i {
  display: block;
  font-size: 1.1rem;
  line-height: 1;
  pointer-events: none;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}

/* Right-side icon inside the rounded pill input. */
.kmu7-auth-page .kmu7-field-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--auth-text);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  opacity: 0.85;
}

.kmu7-auth-page .kmu7-field-icon--user {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-3.866 0-9 1.933-9 5.5V21h18v-1.5c0-3.567-5.134-5.5-9-5.5z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0 2c-3.866 0-9 1.933-9 5.5V21h18v-1.5c0-3.567-5.134-5.5-9-5.5z'/></svg>");
}

.kmu7-auth-page .kmu7-field-icon--lock {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/></svg>");
}

.kmu7-auth-page .kmu7-input:focus,
.kmu7-auth-page .kmu7-select:focus,
.kmu7-auth-page .kmu7-textarea:focus {
  outline: none;
  background: var(--auth-input-bg-focus);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}

/* Primary button: ตัวอักษรใหญ่ขึ้น 20% */
.kmu7-auth-page .kmu7-btn--primary {
  background: rgba(255, 255, 255, 0.95);
  color: #0b1220;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35);
  margin-top: 0.6rem;
  width: 100%;
  padding: 0.675rem 1.1rem !important; /* -10% from 0.75rem */
  font-weight: 700;
  font-size: 1.54rem; /* +35% */
  line-height: 1.1 !important;
  min-height: 0 !important;
  letter-spacing: 0.01em;
}

.kmu7-auth-page .kmu7-btn--primary:hover {
  background: #f59e0b !important; /* orange */
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important; /* prevent square hover */
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.35);
}

.kmu7-auth-page .kmu7-btn--primary:focus,
.kmu7-auth-page .kmu7-btn--primary:focus-visible {
  outline: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35), 0 16px 34px rgba(2, 6, 23, 0.35) !important;
}

/* Ghost / register link: เอากรอบออก, อักษรใหญ่ขึ้น 10% */
.kmu7-auth-page .kmu7-btn--ghost {
  color: var(--auth-text);
  border: 0 !important;
  background: transparent;
  border-radius: 999px;
  padding: 0.5rem 0.6rem;
  font-size: 1.20rem; /* +15% */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.kmu7-auth-page .kmu7-btn--ghost:hover {
  background: transparent !important; /* no box */
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(245, 158, 11, 1) !important; /* color change only */
  text-decoration: none;
}

/* Forgot password link: +20% */
.kmu7-auth-page a[href*="forgot_password.php"] {
  font-size: 1.20em;
}

.kmu7-auth-page a {
  color: var(--auth-text);
}

.kmu7-auth-page .kmu7-alert--error {
  background: rgba(248, 113, 113, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.40);
  color: #fee2e2;
}

.kmu7-auth-page .kmu7-alert--ok {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.40);
  color: #dcfce7;
}

.kmu7-fallback-header,
.kmu7-fallback-footer {
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--surface2);
}
.kmu7-fallback-footer {
  border-top: 1px solid var(--surface2);
  border-bottom: none;
  margin-top: auto;
}

.kmu7-main {
  padding: 1.25rem 1rem 3rem;
}

.kmu7-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.kmu7-lang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.kmu7-lang__link {
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
}

.kmu7-lang__link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.kmu7-lang__link.is-active {
  color: var(--text);
  font-weight: 700;
}

.kmu7-lang__sep {
  opacity: 0.45;
  user-select: none;
}

.kmu7-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.5rem 1.25rem;
}

@media (min-width: 480px) {
  .kmu7-card {
    padding: 2rem 2rem;
  }
}

.kmu7-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.02em;
}

.kmu7-subtitle {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.kmu7-lead {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* รายการคอร์ส + หน้ารายวิชา (รูปปกจากแอดมิน) */
.kmu7-course-catalog {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.kmu7-course-catalog__item {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}
.kmu7-course-catalog__thumb {
  flex: 0 0 auto;
  width: 140px;
  max-width: 38%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.kmu7-course-catalog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kmu7-course-catalog__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  padding: 0.35rem;
  line-height: 1.3;
}
.kmu7-course-catalog__body {
  flex: 1 1 200px;
  min-width: 0;
}
.kmu7-course-catalog__actions {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}
.kmu7-course-detail__cover-wrap {
  margin: 0 0 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}
.kmu7-course-detail__cover {
  display: block;
  width: 100%;
  max-height: min(52vh, 420px);
  object-fit: cover;
  object-position: center;
}
.kmu7-course-detail__title {
  margin-top: 0;
}

.kmu7-page.kmu7-catalog-page .kmu7-wrap,
.kmu7-page.kmu7-course-preview-page .kmu7-wrap,
.kmu7-page.kmu7-learning-history-page .kmu7-wrap,
.kmu7-page.kmu7-learning-profile-page .kmu7-wrap {
  max-width: 1120px;
}

.kmu7-portal-head {
  align-items: flex-start;
}

.kmu7-portal-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

.kmu7-course-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  gap: 1rem;
  align-items: end;
  margin: 1rem 0 0.75rem;
}

.kmu7-course-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kmu7-course-toolbar__field label {
  font-size: 0.88rem;
  color: var(--muted);
}

.kmu7-course-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.kmu7-course-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.kmu7-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.kmu7-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.2;
}

.kmu7-badge--muted {
  background: rgba(148, 163, 184, 0.14);
  color: #dbeafe;
}

.kmu7-badge--ok {
  background: rgba(34, 197, 94, 0.18);
  color: #bbf7d0;
}

.kmu7-badge--warn {
  background: rgba(245, 158, 11, 0.16);
  color: #fde68a;
}

.kmu7-course-hero {
  margin: 0 0 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
}

.kmu7-course-hero__img {
  display: block;
  width: 100%;
  max-height: min(48vh, 420px);
  object-fit: cover;
  object-position: center;
}

.kmu7-course-preview__summary {
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.65;
  white-space: pre-wrap;
}

.kmu7-course-preview__notice {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.kmu7-course-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.kmu7-course-preview__section {
  margin-top: 1.5rem;
}

.kmu7-course-outline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kmu7-course-outline__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

.kmu7-course-outline__index {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
}

.kmu7-course-outline__title {
  line-height: 1.45;
}

.kmu7-history-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kmu7-history-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

.kmu7-history-card__thumb {
  flex: 0 0 220px;
  max-width: 32%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.kmu7-history-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kmu7-history-card__body {
  flex: 1 1 360px;
  min-width: 0;
}

.kmu7-history-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.kmu7-history-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.kmu7-profile-section + .kmu7-profile-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kmu7-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.kmu7-info-grid__item {
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

.kmu7-info-grid__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.kmu7-page.kmu7-catalog-page,
.kmu7-page.kmu7-course-preview-page,
.kmu7-page.kmu7-learning-history-page,
.kmu7-page.kmu7-learning-profile-page {
  --text: #1f2937;
  --muted: #6b7280;
  --surface: #fffaf4;
  --surface2: #fed7aa;
  --accent: #f97316;
  --accent2: #fb923c;
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.16), transparent 28%),
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.14), transparent 24%),
    linear-gradient(180deg, #fffdf9 0%, #fff7ed 62%, #fff3e6 100%);
  color: var(--text);
}

.kmu7-page.kmu7-catalog-page .kmu7-main,
.kmu7-page.kmu7-course-preview-page .kmu7-main,
.kmu7-page.kmu7-learning-history-page .kmu7-main,
.kmu7-page.kmu7-learning-profile-page .kmu7-main {
  padding: 2rem 1rem 6.25rem;
}

.kmu7-page.kmu7-catalog-page .kmu7-title,
.kmu7-page.kmu7-course-preview-page .kmu7-title,
.kmu7-page.kmu7-learning-history-page .kmu7-title,
.kmu7-page.kmu7-learning-profile-page .kmu7-title {
  color: #111827;
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  font-style: normal;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.kmu7-page.kmu7-catalog-page .kmu7-subtitle,
.kmu7-page.kmu7-course-preview-page .kmu7-subtitle,
.kmu7-page.kmu7-learning-history-page .kmu7-subtitle,
.kmu7-page.kmu7-learning-profile-page .kmu7-subtitle {
  color: #111827;
  font-size: 1.35rem;
}

.kmu7-page.kmu7-catalog-page .kmu7-lead,
.kmu7-page.kmu7-course-preview-page .kmu7-lead,
.kmu7-page.kmu7-learning-history-page .kmu7-lead,
.kmu7-page.kmu7-learning-profile-page .kmu7-lead {
  color: #6b7280;
  font-size: 1rem;
}

.kmu7-page.kmu7-catalog-page .kmu7-btn--primary,
.kmu7-page.kmu7-course-preview-page .kmu7-btn--primary,
.kmu7-page.kmu7-learning-history-page .kmu7-btn--primary,
.kmu7-page.kmu7-learning-profile-page .kmu7-btn--primary,
.kmu7-page.kmu7-catalog-page .kmu7-btn--ghost,
.kmu7-page.kmu7-course-preview-page .kmu7-btn--ghost,
.kmu7-page.kmu7-learning-history-page .kmu7-btn--ghost,
.kmu7-page.kmu7-learning-profile-page .kmu7-btn--ghost {
  width: auto;
  margin-top: 0;
  min-height: 3rem;
  padding: 0.78rem 1.25rem;
  font-weight: 700;
}

.kmu7-page.kmu7-catalog-page .kmu7-btn--primary,
.kmu7-page.kmu7-course-preview-page .kmu7-btn--primary,
.kmu7-page.kmu7-learning-history-page .kmu7-btn--primary,
.kmu7-page.kmu7-learning-profile-page .kmu7-btn--primary {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #fff;
  box-shadow: 0 14px 34px rgba(249, 115, 22, 0.28);
}

.kmu7-page.kmu7-catalog-page .kmu7-btn--primary:hover,
.kmu7-page.kmu7-course-preview-page .kmu7-btn--primary:hover,
.kmu7-page.kmu7-learning-history-page .kmu7-btn--primary:hover,
.kmu7-page.kmu7-learning-profile-page .kmu7-btn--primary:hover {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  box-shadow: 0 16px 36px rgba(234, 88, 12, 0.3);
}

.kmu7-page.kmu7-catalog-page .kmu7-btn--ghost,
.kmu7-page.kmu7-course-preview-page .kmu7-btn--ghost,
.kmu7-page.kmu7-learning-history-page .kmu7-btn--ghost,
.kmu7-page.kmu7-learning-profile-page .kmu7-btn--ghost {
  background: rgba(255, 255, 255, 0.94);
  color: #c2410c;
  border-color: rgba(249, 115, 22, 0.22);
  box-shadow: 0 10px 24px rgba(148, 163, 184, 0.16);
}

.kmu7-page.kmu7-catalog-page .kmu7-btn--ghost:hover,
.kmu7-page.kmu7-course-preview-page .kmu7-btn--ghost:hover,
.kmu7-page.kmu7-learning-history-page .kmu7-btn--ghost:hover,
.kmu7-page.kmu7-learning-profile-page .kmu7-btn--ghost:hover {
  background: #fff;
  border-color: rgba(249, 115, 22, 0.42);
}

.kmu7-page.kmu7-learning-history-page .kmu7-btn[disabled],
.kmu7-page.kmu7-learning-history-page .kmu7-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.kmu7-page.kmu7-catalog-page .kmu7-card {
  --text: #f8fafc;
  --muted: #cbd5e1;
  background: linear-gradient(180deg, #192334 0%, #111b2b 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.24);
  padding: clamp(1.25rem, 3vw, 1.7rem);
}

.kmu7-page.kmu7-course-preview-page .kmu7-card,
.kmu7-page.kmu7-learning-history-page .kmu7-card,
.kmu7-page.kmu7-learning-profile-page .kmu7-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(251, 146, 60, 0.16);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.kmu7-page.kmu7-catalog-page .kmu7-card .kmu7-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff7ed;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.kmu7-page.kmu7-catalog-page .kmu7-card .kmu7-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}

.kmu7-page.kmu7-catalog-page .kmu7-course-toolbar__field label,
.kmu7-page.kmu7-catalog-page .kmu7-course-toolbar__meta {
  color: #e2e8f0;
}

.kmu7-page.kmu7-catalog-page .kmu7-input,
.kmu7-page.kmu7-catalog-page .kmu7-select {
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.kmu7-page.kmu7-catalog-page .kmu7-input::placeholder {
  color: #94a3b8;
}

.kmu7-page.kmu7-catalog-page .kmu7-input:focus,
.kmu7-page.kmu7-catalog-page .kmu7-select:focus,
.kmu7-page.kmu7-course-preview-page .kmu7-input:focus,
.kmu7-page.kmu7-course-preview-page .kmu7-select:focus,
.kmu7-page.kmu7-learning-history-page .kmu7-input:focus,
.kmu7-page.kmu7-learning-history-page .kmu7-select:focus,
.kmu7-page.kmu7-learning-profile-page .kmu7-input:focus,
.kmu7-page.kmu7-learning-profile-page .kmu7-select:focus {
  outline: 2px solid rgba(249, 115, 22, 0.35);
}

.kmu7-page.kmu7-catalog-page .kmu7-course-catalog__item,
.kmu7-page.kmu7-course-preview-page .kmu7-course-outline__item,
.kmu7-page.kmu7-learning-history-page .kmu7-history-card,
.kmu7-page.kmu7-learning-profile-page .kmu7-info-grid__item {
  border-color: rgba(251, 146, 60, 0.14);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.kmu7-page.kmu7-catalog-page .kmu7-course-catalog__item {
  --text: #1f2937;
  --muted: #64748b;
  background: rgba(255, 255, 255, 0.97);
  color: #1f2937;
  border-radius: 18px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.kmu7-page.kmu7-catalog-page .kmu7-course-catalog__item .kmu7-btn--ghost {
  background: #fff7ed;
  color: #c2410c;
  border-color: rgba(249, 115, 22, 0.22);
}

.kmu7-page.kmu7-catalog-page .kmu7-course-catalog__item .kmu7-btn--ghost:hover {
  background: #ffedd5;
}

.kmu7-page.kmu7-catalog-page .kmu7-course-catalog__item:hover {
  transform: translateY(-2px);
  border-color: rgba(249, 115, 22, 0.34);
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.14);
}

.kmu7-page.kmu7-catalog-page .kmu7-course-catalog__thumb,
.kmu7-page.kmu7-learning-history-page .kmu7-history-card__thumb {
  border-color: rgba(251, 146, 60, 0.16);
  background: #fff7ed;
}

.kmu7-page.kmu7-catalog-page .kmu7-course-catalog__thumb--empty {
  color: #b45309;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
}

.kmu7-page.kmu7-catalog-page .kmu7-badge,
.kmu7-page.kmu7-course-preview-page .kmu7-badge,
.kmu7-page.kmu7-learning-history-page .kmu7-badge,
.kmu7-page.kmu7-learning-profile-page .kmu7-badge {
  border-color: rgba(249, 115, 22, 0.16);
  background: rgba(255, 237, 213, 0.9);
  color: #9a3412;
}

.kmu7-page.kmu7-catalog-page .kmu7-badge--muted,
.kmu7-page.kmu7-course-preview-page .kmu7-badge--muted,
.kmu7-page.kmu7-learning-history-page .kmu7-badge--muted,
.kmu7-page.kmu7-learning-profile-page .kmu7-badge--muted {
  background: rgba(255, 247, 237, 0.96);
  color: #b45309;
}

.kmu7-page.kmu7-catalog-page .kmu7-badge--ok,
.kmu7-page.kmu7-course-preview-page .kmu7-badge--ok,
.kmu7-page.kmu7-learning-history-page .kmu7-badge--ok,
.kmu7-page.kmu7-learning-profile-page .kmu7-badge--ok {
  background: rgba(255, 237, 213, 0.98);
  color: #c2410c;
}

.kmu7-page.kmu7-catalog-page .kmu7-badge--warn,
.kmu7-page.kmu7-course-preview-page .kmu7-badge--warn,
.kmu7-page.kmu7-learning-history-page .kmu7-badge--warn,
.kmu7-page.kmu7-learning-profile-page .kmu7-badge--warn {
  background: rgba(254, 215, 170, 0.72);
  color: #9a3412;
}

.kmu7-page.kmu7-course-preview-page .kmu7-course-hero {
  border-color: rgba(251, 146, 60, 0.2);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
}

.kmu7-page.kmu7-course-preview-page .kmu7-course-preview__notice {
  border-color: rgba(251, 146, 60, 0.16);
  background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.kmu7-page.kmu7-course-preview-page .kmu7-course-outline__item,
.kmu7-page.kmu7-learning-history-page .kmu7-history-card,
.kmu7-page.kmu7-learning-profile-page .kmu7-info-grid__item {
  background: #fff;
}

.kmu7-page.kmu7-course-preview-page .kmu7-course-outline__index {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #fff;
  box-shadow: 0 12px 22px rgba(249, 115, 22, 0.22);
}

.kmu7-page.kmu7-learning-history-page .kmu7-history-card__meta,
.kmu7-page.kmu7-learning-profile-page .kmu7-info-grid__label {
  color: #6b7280;
}

.kmu7-page.kmu7-catalog-page .kmu7-alert--ok,
.kmu7-page.kmu7-course-preview-page .kmu7-alert--ok,
.kmu7-page.kmu7-learning-history-page .kmu7-alert--ok,
.kmu7-page.kmu7-learning-profile-page .kmu7-alert--ok {
  background: rgba(255, 237, 213, 0.9);
  border: 1px solid rgba(249, 115, 22, 0.18);
  color: #9a3412;
}

.kmu7-page.kmu7-catalog-page .kmu7-alert--error,
.kmu7-page.kmu7-course-preview-page .kmu7-alert--error,
.kmu7-page.kmu7-learning-history-page .kmu7-alert--error,
.kmu7-page.kmu7-learning-profile-page .kmu7-alert--error {
  background: rgba(254, 242, 242, 0.96);
  border: 1px solid rgba(239, 68, 68, 0.18);
  color: #b91c1c;
}

.kmu7-page.kmu7-catalog-page .kmu7-lang,
.kmu7-page.kmu7-course-preview-page .kmu7-lang,
.kmu7-page.kmu7-learning-history-page .kmu7-lang,
.kmu7-page.kmu7-learning-profile-page .kmu7-lang {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 999;
  margin: 0;
  padding: 0.4rem 0.5rem;
  justify-content: flex-start;
  gap: 0.15rem;
  border-radius: 16px;
  border: 1px solid rgba(251, 146, 60, 0.16);
  background: rgba(255, 255, 255, 0.95);
  color: #9ca3af;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.kmu7-page.kmu7-catalog-page .kmu7-lang::before,
.kmu7-page.kmu7-course-preview-page .kmu7-lang::before,
.kmu7-page.kmu7-learning-history-page .kmu7-lang::before,
.kmu7-page.kmu7-learning-profile-page .kmu7-lang::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  border: 2px solid #f97316;
  opacity: 0.7;
}

.kmu7-page.kmu7-catalog-page .kmu7-lang__link,
.kmu7-page.kmu7-course-preview-page .kmu7-lang__link,
.kmu7-page.kmu7-learning-history-page .kmu7-lang__link,
.kmu7-page.kmu7-learning-profile-page .kmu7-lang__link {
  color: #6b7280;
  padding: 0.42rem 0.7rem;
  border-radius: 12px;
  font-weight: 700;
}

.kmu7-page.kmu7-catalog-page .kmu7-lang__link:hover,
.kmu7-page.kmu7-course-preview-page .kmu7-lang__link:hover,
.kmu7-page.kmu7-learning-history-page .kmu7-lang__link:hover,
.kmu7-page.kmu7-learning-profile-page .kmu7-lang__link:hover {
  background: rgba(255, 237, 213, 0.9);
  color: #c2410c;
}

.kmu7-page.kmu7-catalog-page .kmu7-lang__link.is-active,
.kmu7-page.kmu7-course-preview-page .kmu7-lang__link.is-active,
.kmu7-page.kmu7-learning-history-page .kmu7-lang__link.is-active,
.kmu7-page.kmu7-learning-profile-page .kmu7-lang__link.is-active {
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #fff;
}

.kmu7-page.kmu7-catalog-page .kmu7-lang__sep,
.kmu7-page.kmu7-course-preview-page .kmu7-lang__sep,
.kmu7-page.kmu7-learning-history-page .kmu7-lang__sep,
.kmu7-page.kmu7-learning-profile-page .kmu7-lang__sep {
  display: none;
}

.kmu7-actions-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

@media (max-width: 860px) {
  .kmu7-course-toolbar {
    grid-template-columns: 1fr;
  }

  .kmu7-history-card__thumb {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .kmu7-page.kmu7-catalog-page .kmu7-main,
  .kmu7-page.kmu7-course-preview-page .kmu7-main,
  .kmu7-page.kmu7-learning-history-page .kmu7-main,
  .kmu7-page.kmu7-learning-profile-page .kmu7-main {
    padding-top: 1.35rem;
    padding-bottom: 5.5rem;
  }

  .kmu7-course-catalog__thumb {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  .kmu7-course-catalog__actions,
  .kmu7-history-card__actions,
  .kmu7-portal-tools {
    justify-content: stretch;
  }

  .kmu7-course-catalog__actions .kmu7-btn,
  .kmu7-history-card__actions .kmu7-btn,
  .kmu7-portal-tools .kmu7-btn {
    width: 100%;
  }

  .kmu7-info-grid {
    grid-template-columns: 1fr;
  }

  .kmu7-page.kmu7-catalog-page .kmu7-title,
  .kmu7-page.kmu7-course-preview-page .kmu7-title,
  .kmu7-page.kmu7-learning-history-page .kmu7-title,
  .kmu7-page.kmu7-learning-profile-page .kmu7-title {
    font-size: 2.4rem;
  }

  .kmu7-page.kmu7-catalog-page .kmu7-lang,
  .kmu7-page.kmu7-course-preview-page .kmu7-lang,
  .kmu7-page.kmu7-learning-history-page .kmu7-lang,
  .kmu7-page.kmu7-learning-profile-page .kmu7-lang {
    left: 0.8rem;
    right: auto;
    bottom: 0.8rem;
  }
}

.kmu7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s;
}

.kmu7-btn:active {
  transform: scale(0.98);
}

.kmu7-btn--primary {
  background: linear-gradient(135deg, var(--accent), #2563eb);
  color: #fff;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  width: 100%;
  margin-top: 0.5rem;
}

.kmu7-btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--surface2);
}

.kmu7-btn--ghost:hover {
  background: var(--surface2);
}

.kmu7-field {
  margin-bottom: 1rem;
}

.kmu7-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.kmu7-field .kmu7-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.kmu7-input,
.kmu7-select,
.kmu7-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--surface2);
  background: #121c2a;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.kmu7-input:focus,
.kmu7-select:focus,
.kmu7-textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
}

.kmu7-textarea {
  min-height: 88px;
  resize: vertical;
}

.kmu7-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.kmu7-check input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent2);
}

.kmu7-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kmu7-alert {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.kmu7-alert--error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

.kmu7-alert--ok {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
}

.kmu7-section-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.25rem 0 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--surface2);
}

.kmu7-section-title:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.kmu7-hidden {
  display: none !important;
}

/* Autocomplete (ลงทะเบียน / แอดมิน) */
.kmu7-ac {
  position: relative;
}

.kmu7-ac__list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 220px;
  overflow-y: auto;
  background: #121c2a;
  border: 1px solid var(--surface2);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.kmu7-ac__item {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text);
}

.kmu7-ac__item:hover,
.kmu7-ac__item:focus {
  background: var(--surface2);
}

/* ตารางแอดมิน */
.kmu7-admin-wide-wrap {
  max-width: 1280px;
}

.kmu7-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.kmu7-admin-toolbar .kmu7-field {
  margin-bottom: 0;
  min-width: 140px;
  flex: 1 1 160px;
}

.kmu7-admin-toolbar .kmu7-field--grow {
  flex: 2 1 220px;
}

.kmu7-admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.kmu7-admin-stat {
  background: #121c2a;
  border: 1px solid var(--surface2);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  min-width: 180px;
}

.kmu7-admin-stat__val {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent2);
}

.kmu7-admin-stat__lbl {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.kmu7-admin-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--surface2);
  background: #121c2a;
}

.kmu7-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.kmu7-admin-table th,
.kmu7-admin-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--surface2);
  vertical-align: top;
}

.kmu7-admin-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.kmu7-admin-table tr:last-child td {
  border-bottom: none;
}

.kmu7-admin-table .kmu7-admin-actions {
  white-space: nowrap;
}

.kmu7-admin-table .kmu7-admin-actions a,
.kmu7-admin-table .kmu7-admin-actions button {
  margin-right: 0.35rem;
}

.kmu7-btn--sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  width: auto;
  margin-top: 0;
}

.kmu7-btn--danger {
  background: rgba(248, 113, 113, 0.15);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.45);
}

.kmu7-btn--danger:hover {
  background: rgba(248, 113, 113, 0.28);
}

.kmu7-admin-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kmu7-admin-line, #ececf1);
}

.kmu7-admin-pagination__info {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kmu7-admin-ink-muted, #6b7280);
  padding: 0 0.35rem;
}

.kmu7-admin-dashboard .kmu7-admin-pagination .kmu7-btn {
  min-height: 2.35rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  width: auto;
  margin-top: 0;
}

.kmu7-admin-dashboard .kmu7-admin-pagination .kmu7-btn--ghost {
  background: #fff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.kmu7-admin-dashboard .kmu7-admin-pagination .kmu7-btn--ghost:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}

.kmu7-admin-dashboard .kmu7-admin-pagination .kmu7-btn--next {
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(242, 101, 34, 0.35);
}

.kmu7-admin-dashboard .kmu7-admin-pagination .kmu7-btn--next:hover {
  filter: brightness(1.06);
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  color: #fff;
}

/* —— แดชบอร์ดแอดมิน (ภาษาไทย) —— */
.kmu7-admin-dash-wrap {
  max-width: 960px;
}

.kmu7-admin-dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kmu7-admin-dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kmu7-admin-dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 560px) {
  .kmu7-admin-dash-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .kmu7-admin-dash-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kmu7-admin-menu-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.15rem;
  border-radius: 10px;
  border: 1px solid var(--surface2);
  background: #121c2a;
  text-decoration: none;
  color: var(--text);
  min-height: 4.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kmu7-admin-menu-card:hover:not(.kmu7-admin-menu-card--soon) {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.kmu7-admin-menu-card--soon {
  opacity: 0.88;
  cursor: not-allowed;
}

.kmu7-admin-menu-card--logout {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.06);
}

.kmu7-admin-menu-card--logout:hover {
  border-color: #f87171;
  box-shadow: 0 4px 16px rgba(248, 113, 113, 0.15);
}

.kmu7-admin-menu-card__title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.kmu7-admin-menu-card__soon {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0;
}

/* คลังข้อสอบ (แอดมิน) */
.kmu7-qb-list-wrap,
.kmu7-qb-editor-wrap {
  max-width: 1000px;
}

.kmu7-qb-filter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kmu7-qb-filter-types {
  border: 0;
  padding: 0;
  margin: 0;
}

.kmu7-qb-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.kmu7-table-wrap {
  overflow-x: auto;
}

.kmu7-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.kmu7-table th,
.kmu7-table td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--surface2);
  vertical-align: top;
}

.kmu7-table th {
  color: var(--muted);
  font-weight: 600;
}

.kmu7-table-muted {
  color: var(--muted);
  font-size: 0.88rem;
}

.kmu7-btn--small {
  font-size: 0.82rem;
  padding: 0.25rem 0.55rem;
}

.kmu7-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.kmu7-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.kmu7-form-row--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.qb-q__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.qb-q__label {
  font-weight: 600;
  color: var(--accent);
}

.qb-opts__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.qb-opt__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.qb-opt-body {
  flex: 1 1 160px;
  min-width: 120px;
}

.qb-opt-file {
  flex: 1 1 140px;
  max-width: 100%;
}

.qb-thumb-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.75rem;
}

.qb-thumb-row--opt {
  margin-left: 2.25rem;
}

.qb-thumb {
  max-height: 100px;
  border-radius: 8px;
  border: 1px solid var(--surface2);
}

.qb-actions-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* =====================================================================
   Admin Dashboard (KMUTT) — หน้าแผงควบคุมหลักของแอดมิน
   ใช้คลาส .kmu7-admin-dashboard บน <body> เพื่อกันสไตล์รั่วไปหน้าอื่น
   ===================================================================== */
:root {
  --kmu7-admin-brand: #f26522;
  --kmu7-admin-brand-2: #ff7a3a;
  --kmu7-admin-brand-deep: #d6541b;
  --kmu7-admin-brand-soft: #ffe7d6;
  --kmu7-admin-ink: #2a2f3a;
  --kmu7-admin-ink-muted: #6b7280;
  --kmu7-admin-line: #ececf1;
  --kmu7-admin-bg: #fff6ee;
  --kmu7-admin-card: #ffffff;
}

body.kmu7-admin-dashboard {
  margin: 0;
  background: var(--kmu7-admin-bg);
  color: var(--kmu7-admin-ink);
  font-family: var(--font), "DB Helvethaica X", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  overflow-x: clip;
}
.kmu7-admin-dashboard *,
.kmu7-admin-dashboard *::before,
.kmu7-admin-dashboard *::after {
  box-sizing: border-box;
}

.kmu7-admin-dashboard a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Layout: 2 columns (sidebar + main) ---------- */
.kmu7-admin-dashboard .kmu7-admin-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
  background: var(--kmu7-admin-bg);
}
/* ---------- Sidebar (orange theme) ---------- */
.kmu7-admin-dashboard .kmu7-admin-sidebar {
  background: linear-gradient(180deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  border-right: 0;
  padding: 0.9rem 0.6rem 0.7rem;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}
.kmu7-admin-dashboard .kmu7-admin-sidebar::-webkit-scrollbar {
  width: 6px;
}
.kmu7-admin-dashboard .kmu7-admin-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 3px;
}

.kmu7-admin-dashboard .kmu7-admin-sidebar__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 0.55rem;
}
.kmu7-admin-dashboard .kmu7-admin-sidebar__logo {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kmu7-admin-dashboard .kmu7-admin-sidebar__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
.kmu7-admin-dashboard .kmu7-admin-sidebar__title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.kmu7-admin-dashboard .kmu7-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  flex: 1 1 auto;
  min-height: 0;
}
.kmu7-admin-dashboard .kmu7-admin-nav__group {
  display: flex;
  flex-direction: column;
  gap: 0.03rem;
  padding: 0.08rem 0;
}
.kmu7-admin-dashboard .kmu7-admin-nav__heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.55rem 0.12rem;
  line-height: 1.2;
}
.kmu7-admin-dashboard .kmu7-admin-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}
.kmu7-admin-dashboard .kmu7-admin-nav__list > li {
  margin: 0;
  padding: 0;
}
.kmu7-admin-dashboard .kmu7-admin-nav__link {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.6rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.kmu7-admin-dashboard .kmu7-admin-nav__link:hover:not(.is-soon) {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.kmu7-admin-dashboard .kmu7-admin-nav__link.is-active {
  background: #ffffff;
  color: var(--kmu7-admin-brand);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-nav__link.is-active .kmu7-admin-nav__icon {
  color: var(--kmu7-admin-brand);
}
.kmu7-admin-dashboard .kmu7-admin-nav__link.is-soon {
  opacity: 0.7;
  cursor: not-allowed;
}
.kmu7-admin-dashboard .kmu7-admin-nav__icon {
  width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.05rem;
}
.kmu7-admin-dashboard .kmu7-admin-nav__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kmu7-admin-dashboard .kmu7-admin-sidebar__bottom {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.kmu7-admin-dashboard .kmu7-admin-sidebar__logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.10rem;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.12s ease, color 0.12s ease;
}
.kmu7-admin-dashboard .kmu7-admin-sidebar__logout:hover {
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
}

/* ---------- Admin mobile top bar + drawer nav ---------- */
.kmu7-admin-dashboard .kmu7-admin-mobilebar,
.kmu7-admin-dashboard .kmu7-admin-sidebar-backdrop,
.kmu7-admin-dashboard .kmu7-admin-sidebar__close {
  display: none;
}

.kmu7-admin-dashboard .kmu7-admin-mobilebar {
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(214, 84, 27, 0.28);
}

.kmu7-admin-dashboard .kmu7-admin-mobilebar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.16);
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.kmu7-admin-dashboard .kmu7-admin-mobilebar__toggle:hover {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
}

.kmu7-admin-dashboard .kmu7-admin-mobilebar__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  border: 0;
  background: rgba(15, 23, 42, 0.48);
}

.kmu7-admin-dashboard .kmu7-admin-sidebar__close {
  position: absolute;
  top: 0.65rem;
  right: 0.55rem;
  z-index: 2;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.18);
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.12s ease;
}

.kmu7-admin-dashboard .kmu7-admin-sidebar__close:hover {
  background: rgba(0, 0, 0, 0.32);
}

@media (max-width: 960px) {
  .kmu7-admin-dashboard .kmu7-admin-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "mobilebar"
      "main";
  }

  .kmu7-admin-dashboard .kmu7-admin-mobilebar {
    display: flex;
    grid-area: mobilebar;
    position: sticky;
    top: 0;
    z-index: 80;
  }

  .kmu7-admin-dashboard .kmu7-admin-main {
    grid-area: main;
    padding: 1rem 0.85rem 1.25rem;
    font-size: 1rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: min(18.5rem, 88vw);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.28);
  }

  .kmu7-admin-dashboard.kmu7-admin-nav-open .kmu7-admin-sidebar {
    transform: translateX(0);
  }

  .kmu7-admin-dashboard.kmu7-admin-nav-open .kmu7-admin-sidebar-backdrop {
    display: block;
  }

  .kmu7-admin-dashboard .kmu7-admin-sidebar__close {
    display: inline-flex;
  }

  .kmu7-admin-dashboard .kmu7-admin-sidebar__brand {
    padding-right: 2.5rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-pageheader__title {
    font-size: 1.35rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-pageheader__lead {
    font-size: 0.9rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-stat {
    padding: 0.95rem 1rem;
    gap: 0.75rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-stat__icon {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-stat__val {
    font-size: 1.75rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-quick {
    padding: 1.1rem 1rem 1.2rem;
    border-radius: 18px;
  }

  .kmu7-admin-dashboard .kmu7-admin-quick__title {
    font-size: 1.15rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-quick__card {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1rem 1rem 0.95rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-quick__ico {
    width: 52px;
    height: 52px;
    font-size: 1.35rem;
    flex: 0 0 auto;
  }

  .kmu7-admin-dashboard .kmu7-admin-quick__name {
    font-size: 1.05rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-quick__desc {
    font-size: 0.88rem;
  }

  .kmu7-admin-dashboard .kmu7-admin-quick__card:not(.is-soon)::after {
    position: static;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .kmu7-admin-dashboard .kmu7-admin-active {
    padding: 1rem 0.85rem;
    border-radius: 18px;
  }

  .kmu7-admin-dashboard .kmu7-admin-pageheader__tools {
    width: 100%;
    justify-content: stretch;
  }

  .kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .kmu7-admin-dashboard .kmu7-admin-pageheader {
    margin-bottom: 0.85rem;
  }
}

/* ---------- Main content (text +20%) ----------
   ขยายตัวอักษรในเนื้อหาหลักทั้งหมดประมาณ 20% (ยกเว้น sidebar) */
.kmu7-admin-dashboard .kmu7-admin-main {
  padding: 1.4rem clamp(1rem, 2.4vw, 2rem);
  min-width: 0;
  font-size: 1.08em;
}

.kmu7-admin-dashboard .kmu7-admin-pageheader {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--kmu7-admin-ink);
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.95rem;
  margin-top: 0.4rem;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__lead {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--kmu7-admin-ink-muted);
  font-weight: 500;
  line-height: 1.35;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-btn {
  white-space: nowrap;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-btn--ghost {
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-btn--ghost:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-btn--danger {
  border: 1px solid rgba(239, 68, 68, 0.45);
}

/* ปุ่มเน้นในแถบหัวข้อแอดมิน (สร้างผู้เรียน / Export รายงาน): โทนส้มตามธีม */
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-reg-create-btn.kmu7-btn--primary,
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-report-export-btn.kmu7-btn--primary {
  width: auto;
  margin-top: 0;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(242, 101, 34, 0.38);
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-reg-create-btn.kmu7-btn--primary i,
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-report-export-btn.kmu7-btn--primary i {
  color: #ffffff;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-reg-create-btn.kmu7-btn--primary:hover,
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-report-export-btn.kmu7-btn--primary:hover {
  background: linear-gradient(135deg, #ff8f52 0%, var(--kmu7-admin-brand) 45%, #c94a12 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(242, 101, 34, 0.45);
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-reg-create-btn.kmu7-btn--primary:hover i,
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-report-export-btn.kmu7-btn--primary:hover i {
  color: #ffffff;
}
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-reg-create-btn.kmu7-btn--primary:focus-visible,
.kmu7-admin-dashboard .kmu7-admin-pageheader__tools .kmu7-admin-report-export-btn.kmu7-btn--primary:focus-visible {
  outline: 2px solid var(--kmu7-admin-brand-deep);
  outline-offset: 2px;
  color: #ffffff;
}

/* ---------- Admin affiliations (list + secondary actions) ---------- */
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar {
  padding: 1rem 1.1rem;
  background: var(--kmu7-admin-card);
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  align-items: flex-end;
}
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar .kmu7-btn {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
/* ฟอร์มค้นหาแอดมิน: ไม่ใช้สไตล์ input มืดของธีมหลัก */
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar .kmu7-field label {
  color: var(--kmu7-admin-ink);
  font-size: 0.95rem;
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar .kmu7-input {
  background: #ffffff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
  font-size: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar .kmu7-input::placeholder {
  color: #6b7280;
  opacity: 1;
}
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar .kmu7-input:focus {
  outline: 2px solid var(--kmu7-admin-brand);
  outline-offset: 1px;
  border-color: rgba(242, 101, 34, 0.45);
}
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar .kmu7-select {
  background: #ffffff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
  font-size: 1rem;
  min-width: 12rem;
}
.kmu7-admin-dashboard .kmu7-admin-list-filter.kmu7-admin-toolbar .kmu7-select:focus {
  outline: 2px solid var(--kmu7-admin-brand);
  outline-offset: 1px;
  border-color: rgba(242, 101, 34, 0.45);
}

/* ---------- Admin question bank (list) ---------- */
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--kmu7-admin-card);
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card .kmu7-field {
  margin-bottom: 0;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card .kmu7-field--grow {
  flex: 1 1 220px;
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card .kmu7-field label {
  color: var(--kmu7-admin-ink);
  font-size: 0.95rem;
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card .kmu7-input {
  background: #ffffff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
  font-size: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card .kmu7-input::placeholder {
  color: #6b7280;
  opacity: 1;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card .kmu7-input:focus {
  outline: 2px solid var(--kmu7-admin-brand);
  outline-offset: 1px;
  border-color: rgba(242, 101, 34, 0.45);
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-card .kmu7-btn {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-legend {
  padding: 0;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-qb-filter-hint {
  margin: 0 0 0.65rem;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.9rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-type-grid .kmu7-check {
  color: var(--kmu7-admin-ink);
  font-size: 0.95rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-type-grid .kmu7-check input {
  accent-color: var(--kmu7-admin-brand);
}
.kmu7-admin-dashboard .kmu7-admin-qb-table td.kmu7-admin-qb-muted {
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.95em;
}
.kmu7-admin-dashboard .kmu7-admin-qb-col-n {
  width: 3.5rem;
  text-align: center;
  white-space: nowrap;
}
.kmu7-admin-dashboard .kmu7-admin-qb-col-actions {
  width: 1%;
  white-space: nowrap;
}

/* ---------- Admin question bank set (editor) ---------- */
.kmu7-admin-dashboard .kmu7-admin-qb-set-page {
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}
.kmu7-admin-dashboard .kmu7-admin-qb-meta-card {
  border-left: 4px solid var(--kmu7-admin-brand);
}
.kmu7-admin-dashboard .kmu7-admin-qb-q-card {
  margin-bottom: 1.25rem;
  border-left: 4px solid #7c3aed;
}
.kmu7-admin-dashboard .kmu7-admin-qb-q-card:last-child {
  margin-bottom: 0;
}
.kmu7-admin-dashboard .kmu7-admin-qb-q-card.qb-q--invalid {
  border-left-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.kmu7-course-slug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.kmu7-course-slug-prefix {
  color: var(--kmu7-muted, #64748b);
  font-size: 0.92rem;
  word-break: break-all;
}
.kmu7-course-slug-input {
  flex: 1 1 12rem;
  min-width: 10rem;
}
.kmu7-course-slug-preview strong {
  word-break: break-all;
}
.kmu7-admin-dashboard .kmu7-admin-qb-set-page .qb-q__label {
  font-weight: 700;
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-qb-set-fieldset {
  border: none;
  margin: 1rem 0 0;
  padding: 0;
}
.kmu7-admin-dashboard .kmu7-admin-qb-set-page .kmu7-admin-qb-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 0.35rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-set-page .kmu7-admin-qb-type-grid .kmu7-check {
  color: var(--kmu7-admin-ink);
  font-size: 0.95rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-set-page .kmu7-admin-qb-type-grid .kmu7-check input {
  accent-color: var(--kmu7-admin-brand);
}
.kmu7-admin-dashboard .kmu7-admin-qb-points-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.kmu7-admin-dashboard .kmu7-admin-qb-points-row__col {
  flex: 0 0 auto;
  min-width: 6.5rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-points-row__col--grow {
  flex: 1 1 220px;
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-qb-opts-hint {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--kmu7-admin-ink-muted);
  flex: 1 1 12rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-set-page .qb-thumb {
  border-color: var(--kmu7-admin-line);
}
.kmu7-admin-dashboard .kmu7-admin-qb-usage-banner {
  border-left: 4px solid #ca8a04;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 55%);
}
.kmu7-admin-dashboard .kmu7-admin-qb-usage-list {
  margin: 0.5rem 0 0.85rem;
  padding-left: 1.25rem;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-qb-usage-list__item {
  margin-bottom: 0.45rem;
}
.kmu7-admin-dashboard .kmu7-admin-qb-usage-list__link {
  font-weight: 700;
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-qb-usage-list__link:hover {
  text-decoration: underline;
}
.kmu7-admin-dashboard .kmu7-admin-qb-usage-list__meta {
  margin-left: 0.35rem;
  font-size: 0.88rem;
  color: var(--kmu7-admin-ink-muted);
  font-weight: 500;
}
.kmu7-admin-dashboard .kmu7-admin-qb-impact-box {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--kmu7-admin-line);
  font-size: 0.95rem;
  line-height: 1.5;
}
.kmu7-admin-dashboard .kmu7-admin-qb-impact-warn {
  color: #b45309;
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-qb-use-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(202, 138, 4, 0.18);
  color: #92400e;
  vertical-align: middle;
}
.kmu7-admin-dashboard .kmu7-admin-qb-use-badge--draft {
  background: #f1f5f9;
  color: #64748b;
}
.kmu7-admin-dashboard .kmu7-admin-qb-title-use {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.kmu7-admin-dashboard .kmu7-admin-aff-list {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kmu7-admin-dashboard .kmu7-admin-aff-item--inactive {
  background: #fafafa;
  border-style: dashed;
}
.kmu7-admin-dashboard .kmu7-admin-aff-item__actions {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--kmu7-admin-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.kmu7-admin-dashboard .kmu7-admin-aff-item__actions .kmu7-btn {
  width: auto;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-aff-item__actions .kmu7-btn--ghost {
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-aff-item__actions .kmu7-btn--ghost:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}

.kmu7-admin-dashboard .kmu7-admin-dept-affline {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  font-weight: 700;
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-dept-affline i {
  margin-top: 0.12rem;
  opacity: 0.88;
  flex-shrink: 0;
}

.kmu7-admin-dashboard .kmu7-admin-detail-flash {
  margin: 0 0 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-detail-card {
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 18px;
  padding: 1.35rem 1.5rem 1.45rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-reg-detail-dl {
  margin: 0;
  display: grid;
  gap: calc(0.85rem * 1.5) calc(1rem * 1.5);
}
.kmu7-admin-dashboard .kmu7-reg-detail-dl > div {
  display: grid;
  grid-template-columns: minmax(15rem, 21rem) 1fr;
  gap: calc(0.35rem * 1.5) calc(1.25rem * 1.5);
  align-items: baseline;
}
@media (max-width: 640px) {
  .kmu7-admin-dashboard .kmu7-reg-detail-dl > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}
.kmu7-admin-dashboard .kmu7-reg-detail-dl dt {
  margin: 0;
  font-size: calc(0.92rem * 1.5);
  font-weight: 700;
  color: var(--kmu7-admin-ink-muted);
  line-height: 1.35;
}
.kmu7-admin-dashboard .kmu7-reg-detail-dl dd {
  margin: 0;
  font-size: calc(1rem * 1.5);
  font-weight: 600;
  color: var(--kmu7-admin-ink);
  word-break: break-word;
  line-height: 1.45;
}

.kmu7-admin-dashboard .kmu7-admin-detail-history {
  margin-top: 1.35rem;
}
.kmu7-admin-dashboard .kmu7-admin-detail-subhead {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-detail-hint {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--kmu7-admin-ink-muted);
  line-height: 1.45;
}
.kmu7-admin-dashboard .kmu7-admin-detail-hint code {
  font-size: 0.86em;
  word-break: break-all;
}
.kmu7-admin-dashboard .kmu7-admin-detail-empty {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px dashed var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.98rem;
}
.kmu7-admin-dashboard .kmu7-admin-detail-history-table {
  margin-top: 0.25rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ---------- Admin registration edit (+40% form text) ---------- */
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-field label {
  font-size: calc(0.875rem * 1.4);
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-input,
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-select {
  font-size: calc(1rem * 1.4);
  background: #fafafa;
  border-color: var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-input:disabled {
  opacity: 0.88;
  background: #f1f5f9;
  color: var(--kmu7-admin-ink-muted);
  cursor: not-allowed;
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-input:focus,
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-select:focus {
  outline-color: var(--kmu7-admin-brand);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-field .kmu7-hint {
  font-size: calc(0.8rem * 1.4);
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit .kmu7-section-title {
  font-size: calc(0.8rem * 1.4);
  color: var(--kmu7-admin-ink-muted);
  border-top-color: var(--kmu7-admin-line);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  margin-top: 1.35rem;
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit__actions .kmu7-btn {
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
  font-size: calc(0.95rem * 1.4);
  padding: calc(0.65rem * 1.12) calc(1.25rem * 1.12);
  min-height: 2.75rem;
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit__actions .kmu7-btn--primary {
  min-width: 9rem;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2), var(--kmu7-admin-brand));
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 22px rgba(242, 101, 34, 0.35);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit__actions .kmu7-btn--primary:hover {
  filter: brightness(1.05);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit__actions .kmu7-btn--ghost {
  min-width: 7.5rem;
  background: #fff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-reg-edit__actions .kmu7-btn--ghost:hover {
  background: #f8f9fb;
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-detail-flash.kmu7-alert--error {
  font-size: calc(0.9rem * 1.4);
  background: #fef2f2;
  border-color: rgba(239, 68, 68, 0.45);
  color: #991b1b;
}

/* ---------- Stat cards ---------- */
.kmu7-admin-dashboard .kmu7-admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.4rem;
  flex-wrap: initial;
}
@media (max-width: 960px) {
  .kmu7-admin-dashboard .kmu7-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
}
@media (max-width: 520px) {
  .kmu7-admin-dashboard .kmu7-admin-stats {
    grid-template-columns: 1fr;
  }
}
.kmu7-admin-dashboard .kmu7-admin-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  min-width: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 100%);
  color: #ffffff;
  border: 0;
  box-shadow: 0 14px 28px rgba(242, 101, 34, 0.22);
}
.kmu7-admin-dashboard .kmu7-admin-stat__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.45rem;
  flex: 0 0 auto;
}
.kmu7-admin-dashboard .kmu7-admin-stat__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-stat__lbl {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.96rem;
  font-weight: 500;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-stat__val {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-stat__val--placeholder {
  opacity: 0.55;
  font-size: 1.65rem;
  font-weight: 700;
}

/* การ์ดสถิติแยก 2 กลุ่มประเภทผู้ใช้ (ในชุดที่ตรงกับตัวกรอง) */
.kmu7-admin-dashboard .kmu7-admin-stat--dual .kmu7-admin-stat__body--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.85rem;
  flex: 1;
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-stat--dual .kmu7-admin-stat__seg {
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-stat--dual .kmu7-admin-stat__seg .kmu7-admin-stat__lbl {
  font-size: 0.82rem;
  line-height: 1.28;
}
.kmu7-admin-dashboard .kmu7-admin-stat--dual .kmu7-admin-stat__seg .kmu7-admin-stat__val {
  font-size: 1.72rem;
  margin-top: 0.12rem;
}
@media (max-width: 520px) {
  .kmu7-admin-dashboard .kmu7-admin-stat--dual .kmu7-admin-stat__body--dual {
    grid-template-columns: 1fr;
  }
}

/* ---------- Quick management panel (modern + larger) ---------- */
.kmu7-admin-dashboard .kmu7-admin-quick {
  background: var(--kmu7-admin-card);
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 22px;
  padding: 1.4rem 1.5rem 1.6rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  background-image:
    radial-gradient(1200px 220px at -10% -40%, rgba(255, 122, 58, 0.10), transparent 60%),
    radial-gradient(900px 200px at 110% -50%, rgba(242, 101, 34, 0.08), transparent 60%);
}
.kmu7-admin-dashboard .kmu7-admin-quick--after-stats {
  margin-top: 1.25rem;
}
.kmu7-admin-dashboard .kmu7-admin-quick__header {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.kmu7-admin-dashboard .kmu7-admin-quick__bolt {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2), var(--kmu7-admin-brand));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 8px 16px rgba(242, 101, 34, 0.28);
}
.kmu7-admin-dashboard .kmu7-admin-quick__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-quick__title span {
  color: var(--kmu7-admin-ink-muted);
  font-weight: 600;
  font-size: 0.92em;
}
.kmu7-admin-dashboard .kmu7-admin-quick__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1100px) {
  .kmu7-admin-dashboard .kmu7-admin-quick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .kmu7-admin-dashboard .kmu7-admin-quick__grid {
    grid-template-columns: 1fr;
  }
}
.kmu7-admin-dashboard .kmu7-admin-quick__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.4rem 1.3rem 1.3rem;
  border-radius: 18px;
  border: 1px solid var(--kmu7-admin-line);
  background: #ffffff;
  color: var(--kmu7-admin-ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.kmu7-admin-dashboard .kmu7-admin-quick__card::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 122, 58, 0.18), transparent 70%);
  z-index: -1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.kmu7-admin-dashboard .kmu7-admin-quick__card:hover:not(.is-soon) {
  transform: translateY(-3px);
  border-color: var(--kmu7-admin-brand);
  box-shadow: 0 18px 38px rgba(242, 101, 34, 0.22);
}
.kmu7-admin-dashboard .kmu7-admin-quick__card:hover:not(.is-soon)::before {
  transform: scale(1.1);
}
.kmu7-admin-dashboard .kmu7-admin-quick__card.is-soon {
  opacity: 0.7;
  cursor: not-allowed;
}
.kmu7-admin-dashboard .kmu7-admin-quick__ico {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2), var(--kmu7-admin-brand));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 10px 24px rgba(242, 101, 34, 0.28);
}
.kmu7-admin-dashboard .kmu7-admin-quick__txt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-quick__name {
  font-weight: 800;
  font-size: 1.18rem;
  color: var(--kmu7-admin-ink);
  line-height: 1.2;
}
.kmu7-admin-dashboard .kmu7-admin-quick__desc {
  font-size: 0.92rem;
  color: var(--kmu7-admin-ink-muted);
  line-height: 1.35;
}
.kmu7-admin-dashboard .kmu7-admin-quick__badge {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand);
}
.kmu7-admin-dashboard .kmu7-admin-quick__card:not(.is-soon)::after {
  content: "\f061"; /* fa-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.kmu7-admin-dashboard .kmu7-admin-quick__card:not(.is-soon):hover::after {
  transform: translateX(4px);
  background: var(--kmu7-admin-brand);
  color: #ffffff;
}

/* ---------- Active users table ---------- */
.kmu7-admin-dashboard .kmu7-admin-active {
  margin-top: 1.4rem;
  background: var(--kmu7-admin-card);
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 22px;
  padding: 1.3rem 1.4rem 1.3rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
.kmu7-admin-dashboard .kmu7-admin-active__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-active__heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-active__headtext {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}
.kmu7-admin-dashboard .kmu7-admin-active__pulse {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 8px 16px rgba(22, 163, 74, 0.28);
  position: relative;
  margin-top: 0.14rem;
}
.kmu7-admin-dashboard .kmu7-admin-active__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(34, 197, 94, 0.55);
  animation: kmu7AdminPulse 1.6s ease-out infinite;
}
@keyframes kmu7AdminPulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.kmu7-admin-dashboard .kmu7-admin-active__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--kmu7-admin-ink);
  line-height: 1.15;
}
.kmu7-admin-dashboard .kmu7-admin-active__title span {
  color: var(--kmu7-admin-ink-muted);
  font-weight: 600;
  font-size: 0.92em;
}
.kmu7-admin-dashboard .kmu7-admin-active__count {
  margin: 0;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.95rem;
  line-height: 1.35;
}
.kmu7-admin-dashboard .kmu7-admin-active__count strong {
  color: var(--kmu7-admin-brand);
  font-weight: 800;
}
.kmu7-admin-dashboard .kmu7-admin-active__alert {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.kmu7-admin-dashboard .kmu7-admin-active__alert--ok {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}
.kmu7-admin-dashboard .kmu7-admin-active__alert--err {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}

/* แอดมิน: กล่องแจ้งเตือนสำเร็จ/ผิดพลาด — ตัวอักษรเข้มบนพื้นอ่อน (ไม่ใช้สีเขียวอ่อนแบบหน้า learner) */
.kmu7-admin-dashboard .kmu7-alert--ok,
.kmu7-admin-dashboard .kmu7-admin-api-key-reveal.kmu7-alert--ok {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #14532d;
}
.kmu7-admin-dashboard .kmu7-alert--ok strong,
.kmu7-admin-dashboard .kmu7-admin-api-key-reveal.kmu7-alert--ok strong {
  color: #14532d;
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-alert--err {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.kmu7-admin-dashboard .kmu7-admin-active__table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--kmu7-admin-line);
}
.kmu7-admin-dashboard .kmu7-admin-active__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.127rem;
  background: #ffffff;
}
.kmu7-admin-dashboard .kmu7-admin-active__table thead th {
  text-align: left;
  background: #fff8f1;
  color: var(--kmu7-admin-brand);
  font-weight: 800;
  font-size: 1.27rem;
  letter-spacing: 0.02em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--kmu7-admin-line);
  white-space: nowrap;
}
.kmu7-admin-dashboard .kmu7-admin-active__table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--kmu7-admin-line);
  vertical-align: middle;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-active__table tbody tr:last-child td {
  border-bottom: 0;
}
.kmu7-admin-dashboard .kmu7-admin-active__table tbody tr:hover {
  background: #fffaf5;
}
.kmu7-admin-dashboard .kmu7-admin-active__table tr.is-blocked td {
  background: rgba(239, 68, 68, 0.05);
}
.kmu7-admin-dashboard .kmu7-admin-active__empty {
  text-align: center;
  color: var(--kmu7-admin-ink-muted);
  padding: 1.4rem !important;
  font-style: italic;
}

.kmu7-admin-dashboard .kmu7-col-num {
  width: 64px;
  text-align: center;
  font-weight: 700;
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-active__table thead .kmu7-col-num {
  text-align: center;
}
.kmu7-admin-dashboard .kmu7-col-ip code {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  background: #f3f4f6;
  color: #111827;
  font-family: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.kmu7-admin-dashboard .kmu7-col-device {
  min-width: 9.5rem;
  max-width: 14rem;
}
.kmu7-admin-dashboard .kmu7-admin-active__device {
  display: inline-block;
  font-size: 1.058rem;
  line-height: 1.35;
  color: #374151;
}
.kmu7-admin-dashboard .kmu7-col-action {
  width: 1%;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-admin-active__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-active__sub {
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.978rem;
  margin-top: 0.15rem;
}
.kmu7-admin-dashboard .kmu7-admin-active__muted {
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-admin-active__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d1d5db;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.kmu7-admin-dashboard .kmu7-admin-active__dot--online {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.kmu7-admin-dashboard .kmu7-admin-active__dot--blocked {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.kmu7-admin-dashboard .kmu7-admin-active__chip {
  font-size: 0.851rem;
  font-weight: 800;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.kmu7-admin-dashboard .kmu7-admin-active__chip--online {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.kmu7-admin-dashboard .kmu7-admin-active__chip--blocked {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.kmu7-admin-dashboard .kmu7-admin-active__form {
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-active__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.058rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.kmu7-admin-dashboard .kmu7-admin-active__btn--block {
  background: rgba(239, 68, 68, 0.10);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.30);
}
.kmu7-admin-dashboard .kmu7-admin-active__btn--block:hover {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28);
  transform: translateY(-1px);
}
.kmu7-admin-dashboard .kmu7-admin-active__btn--unblock {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.32);
}
.kmu7-admin-dashboard .kmu7-admin-active__btn--unblock:hover {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .kmu7-admin-dashboard .kmu7-admin-active__table thead {
    display: none;
  }
  .kmu7-admin-dashboard .kmu7-admin-active__table,
  .kmu7-admin-dashboard .kmu7-admin-active__table tbody,
  .kmu7-admin-dashboard .kmu7-admin-active__table tr,
  .kmu7-admin-dashboard .kmu7-admin-active__table td {
    display: block;
    width: 100%;
  }
  .kmu7-admin-dashboard .kmu7-admin-active__table tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--kmu7-admin-line);
  }
  .kmu7-admin-dashboard .kmu7-admin-active__table td {
    padding: 0.35rem 0.9rem;
    border-bottom: 0;
  }
  .kmu7-admin-dashboard .kmu7-col-num::before  { content: "ลำดับ: "; color: var(--kmu7-admin-ink-muted); font-weight: 700; }
  .kmu7-admin-dashboard .kmu7-col-aff::before  { content: "หน่วยงาน: "; color: var(--kmu7-admin-ink-muted); font-weight: 700; }
  .kmu7-admin-dashboard .kmu7-col-ip::before   { content: "ไอพี: "; color: var(--kmu7-admin-ink-muted); font-weight: 700; }
}

/* ---------- Admin registrations: orange filter bar ---------- */
.kmu7-admin-dashboard .kmu7-reg-filter-bar {
  margin-bottom: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 50%, var(--kmu7-admin-brand-deep) 100%);
  box-shadow: 0 14px 34px rgba(242, 101, 34, 0.3);
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-field label {
  color: rgba(255, 255, 255, 0.96);
  font-size: calc(0.875rem * 1.25); /* +25% เทียบกับ label มาตรฐานของฟอร์ม */
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-hint {
  color: rgba(255, 255, 255, 0.88);
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-hint a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-input,
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-select {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-input:focus,
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-select:focus {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 1px;
  border-color: #ffffff;
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-input::placeholder {
  color: #9ca3af;
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar {
  margin-bottom: 0;
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-ac__list {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-ac__item {
  color: var(--kmu7-admin-ink);
  font-size: calc(0.9rem * 1.2);
  line-height: 1.35;
  padding: 0.5rem 0.75rem;
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-ac__item:hover,
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-ac__item:focus {
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__submit.kmu7-btn,
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__submit.kmu7-btn.kmu7-btn--ghost {
  background: #ffffff;
  color: var(--kmu7-admin-brand-deep);
  border: 1px solid #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__submit.kmu7-btn:hover,
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__submit.kmu7-btn.kmu7-btn--ghost:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
}

/* ---------- Admin registrations: light table + icon actions ---------- */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light {
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table {
  font-size: calc(1.188rem * 1.15); /* เดิม +35% จาก 0.88rem แล้ว +15% อีกครั้ง */
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table th {
  color: var(--kmu7-admin-ink-muted);
  background: #f8fafc;
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table td {
  color: var(--kmu7-admin-ink);
  vertical-align: middle;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table th,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table td {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 0.62rem 0.75rem;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table tbody tr:hover td {
  background: #fff7f4;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-reg-col-num {
  width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--kmu7-admin-ink-muted);
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-reg-col-aff {
  max-width: 16rem;
  word-break: break-word;
}

/* รายงานผู้เรียนตามคอร์ส: รายวิชา / หน่วยงาน / ภาควิชา — ตัดบรรทัดได้ สูงสุด 3 บรรทัด (hover ดูเต็มจาก title) */
.kmu7-admin-dashboard .kmu7-course-report-table-wrap .kmu7-course-report-td--clip {
  max-width: 12.5rem;
  vertical-align: top;
}
.kmu7-admin-dashboard .kmu7-course-report-table-wrap .kmu7-course-report-td--clip--course {
  max-width: 15rem;
}
.kmu7-admin-dashboard .kmu7-course-report-table-wrap .kmu7-course-report-cell__clip {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.kmu7-admin-dashboard .kmu7-course-report-table-wrap .kmu7-course-report-cell__clip .kmu7-hint {
  white-space: nowrap;
}
.kmu7-admin-dashboard .kmu7-course-report-table-wrap .kmu7-course-report-cell__clip strong {
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light th.kmu7-reg-col-actions {
  text-align: center;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-actions {
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light td.kmu7-admin-actions:has(.kmu7-admin-lcp-actions__inner) {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  white-space: normal;
  max-width: none;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-actions__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-actions .kmu7-admin-iconbtn {
  margin-right: 0;
}

.kmu7-admin-dashboard .kmu7-admin-toolbar__submit-wrap {
  flex: 0 1 160px;
  min-width: 140px;
  max-width: 220px;
}
.kmu7-admin-dashboard .kmu7-admin-toolbar__submit-label {
  visibility: hidden;
}
.kmu7-admin-dashboard .kmu7-admin-toolbar .kmu7-admin-toolbar__submit.kmu7-btn {
  width: 100%;
  min-height: calc((0.65rem * 2) + 1.25em);
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  line-height: 1.25;
  box-sizing: border-box;
}

.kmu7-admin-dashboard .kmu7-admin-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--kmu7-admin-line);
  background: #ffffff;
  color: var(--kmu7-admin-brand);
  text-decoration: none;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kmu7-admin-dashboard .kmu7-admin-iconbtn:hover {
  background: #fff7f4;
  border-color: var(--kmu7-admin-brand);
  color: var(--kmu7-admin-brand-2);
}
.kmu7-admin-dashboard .kmu7-admin-iconbtn--danger {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.45);
  background: #fffdfd;
}
.kmu7-admin-dashboard .kmu7-admin-iconbtn--danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

/* ---------- Admin courses list ---------- */
/* ใช้ความกว้างเต็มพื้นที่ main เหมือนหน้าแอดมินอื่น (ไม่จำกัด max-width + center) */
.kmu7-admin-dashboard .kmu7-admin-courses-page {
  --kmu7-courses-scale: 1.25;
  width: 100%;
  min-width: 0;
  font-size: 125%;
}

.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-admin-pageheader__title {
  font-size: calc(1.6rem * 1.15);
}

.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-admin-pageheader__meta,
.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-admin-pageheader__lead {
  font-size: calc(0.95rem * var(--kmu7-courses-scale));
}

.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-input,
.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-select,
.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-btn {
  font-size: calc(1rem * var(--kmu7-courses-scale));
}

.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-alert,
.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-admin-detail-empty {
  font-size: calc(0.95rem * var(--kmu7-courses-scale));
}

.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-field label {
  color: var(--kmu7-admin-ink-muted);
  font-weight: 600;
  font-size: calc(0.875rem * var(--kmu7-courses-scale));
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-input,
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-select {
  background: #fafafa;
  border-color: var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-course-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-course-filters .kmu7-field {
  flex: 1 1 200px;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-courses-clear {
  width: auto;
  margin: 0 0 0.15rem;
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-courses-clear:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-ac-wrap {
  position: relative;
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-ac-dd {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 12px;
  max-height: 220px;
  overflow: auto;
  z-index: 30;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-ac-dd li {
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-size: calc(0.92rem * var(--kmu7-courses-scale));
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-ac-dd li:hover,
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-ac-dd li.is-active {
  background: var(--kmu7-admin-brand-soft);
}
.kmu7-admin-dashboard .kmu7-admin-courses-table-wrap {
  overflow-x: auto;
  margin: 0 -0.1rem;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(1.14rem * var(--kmu7-courses-scale));
  background: #ffffff;
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-course-table th,
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-course-table td {
  text-align: left;
  padding: 0.72rem 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  vertical-align: top;
  line-height: 1.45;
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-course-table th {
  color: var(--kmu7-admin-ink-muted);
  font-weight: 700;
  font-size: calc(1.056rem * var(--kmu7-courses-scale));
  background: #f8fafc;
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-course-table td {
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-courses-panel .kmu7-course-table tbody tr:hover td {
  background: #fff7f4;
}
.kmu7-admin-dashboard .kmu7-admin-courses-subtitle {
  margin: 0.2rem 0 0;
  font-size: calc(1.056rem * var(--kmu7-courses-scale));
  color: var(--kmu7-admin-ink-muted);
  line-height: 1.35;
}
.kmu7-admin-dashboard .kmu7-admin-courses-muted {
  color: var(--kmu7-admin-ink-muted);
  font-size: calc(1.08rem * var(--kmu7-courses-scale));
}
.kmu7-admin-dashboard .kmu7-admin-courses-badge {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: calc(0.96rem * var(--kmu7-courses-scale));
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-courses-badge--pub {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.kmu7-admin-dashboard .kmu7-admin-courses-badge--draft {
  background: rgba(148, 163, 184, 0.2);
  color: #64748b;
}
.kmu7-admin-dashboard .kmu7-admin-courses-badge--sched {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}
.kmu7-admin-dashboard .kmu7-admin-courses-badge--expired {
  background: rgba(248, 113, 113, 0.14);
  color: #b91c1c;
}
.kmu7-admin-dashboard .kmu7-admin-courses-schedule-note {
  margin-top: 0.35rem;
  color: var(--kmu7-admin-ink-muted);
  font-size: calc(0.936rem * var(--kmu7-courses-scale));
  line-height: 1.35;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 640px) {
  .kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-schedule-grid {
    grid-template-columns: 1fr;
  }
}
.kmu7-admin-dashboard .kmu7-admin-courses-edit {
  width: auto;
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
  text-decoration: none;
}
.kmu7-admin-dashboard .kmu7-admin-courses-edit:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-courses-copy {
  width: auto;
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
  text-decoration: none;
}
.kmu7-admin-dashboard .kmu7-admin-courses-copy:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-courses-row-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 9.5rem;
}
.kmu7-admin-dashboard .kmu7-admin-courses-row-actions .kmu7-btn {
  width: 100%;
  margin: 0;
  justify-content: center;
  white-space: nowrap;
}
.kmu7-admin-dashboard .kmu7-admin-courses-copy-link.is-copied {
  color: #047857;
  border-color: rgba(16, 185, 129, 0.45);
  background: #ecfdf5;
}

/* ---------- Admin course form (create / edit) ---------- */
/* เต็มความกว้าง main เหมือนหน้าอื่น — เดิมจำกัด 960px ทำให้ดูแคบ */
.kmu7-admin-dashboard .kmu7-admin-courseform-page {
  width: 100%;
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel {
  margin-bottom: 1rem;
  padding: 1.15rem 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--kmu7-admin-line);
  border-left: 4px solid var(--kmu7-admin-brand);
  background: linear-gradient(180deg, #fffdfb 0%, #ffffff 52%);
  box-shadow: 0 1px 2px rgba(42, 47, 58, 0.06);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel__title {
  margin: 0 0 0.35rem;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel__lede {
  margin: 0 0 0.85rem;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-form__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-form__field {
  flex: 1 1 14rem;
  min-width: 14rem;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel .kmu7-field label {
  color: var(--kmu7-admin-ink-muted);
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel .kmu7-input,
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel .kmu7-select {
  background: #fafafa;
  border-color: var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel .kmu7-input:focus,
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel .kmu7-select:focus {
  outline: 2px solid var(--kmu7-admin-brand);
  outline-offset: 0;
  border-color: transparent;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-panel .kmu7-hint {
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-form__btn {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  min-height: 2.75rem;
  padding: calc(0.65rem * 1.12) calc(1.25rem * 1.12);
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2), var(--kmu7-admin-brand));
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 22px rgba(242, 101, 34, 0.35);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-form__btn:hover {
  filter: brightness(1.05);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-copy-form__btn:focus-visible {
  outline: 2px solid var(--kmu7-admin-brand-deep);
  outline-offset: 2px;
}

/* แบ่งส่วนฟอร์มคอร์สเป็นการ์ดชัดเจน */
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section {
  margin-top: 1.35rem;
  padding: 1.15rem 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--kmu7-admin-line);
  background: linear-gradient(180deg, #fffdfb 0%, #ffffff 52%);
  box-shadow: 0 1px 2px rgba(42, 47, 58, 0.06);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section:first-of-type {
  margin-top: 0;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--core {
  border-left: 4px solid var(--kmu7-admin-brand);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--content {
  border-left: 4px solid #0ea5e9;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--quiz {
  border-left: 4px solid #7c3aed;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--cert {
  border-left: 4px solid #ca8a04;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--safety {
  border-left: 4px solid #059669;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--access {
  border-left: 4px solid var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section__bar {
  display: flex;
  align-items: center;
  gap: calc(0.65rem * 1.3);
  margin: 0 0 0.35rem;
  font-size: calc(1.12rem * 1.3);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--kmu7-admin-ink);
  line-height: 1.25;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(2.25rem * 1.3);
  height: calc(2.25rem * 1.3);
  border-radius: 14px;
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
  font-size: calc(1rem * 1.3);
  flex-shrink: 0;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--content .kmu7-courseform-section__icon {
  background: rgba(14, 165, 233, 0.14);
  color: #0369a1;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--quiz .kmu7-courseform-section__icon {
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--cert .kmu7-courseform-section__icon {
  background: rgba(202, 138, 4, 0.15);
  color: #92400e;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--safety .kmu7-courseform-section__icon {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--access .kmu7-courseform-section__icon {
  background: rgba(214, 84, 27, 0.12);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section__lede {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-subtitle {
  margin: 1.1rem 0 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(42, 47, 58, 0.14);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section__lede + .kmu7-courseform-subtitle {
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: none;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-box {
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(124, 58, 237, 0.25);
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.04);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-rows {
  display: grid;
  gap: 0.75rem;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.12);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row__meta {
  min-width: 0;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row__name {
  font-weight: 700;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row__count {
  margin-top: 0.2rem;
  font-size: 0.88rem;
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row__warn {
  margin-top: 0.28rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #b91c1c;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row--over {
  border-color: rgba(185, 28, 28, 0.28);
  background: rgba(254, 242, 242, 0.95);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row__input {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row__input .kmu7-input {
  width: 7rem;
  text-align: right;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-summary {
  min-height: 1.25rem;
}
@media (max-width: 720px) {
  .kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row {
    flex-direction: column;
    align-items: stretch;
  }
  .kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-quiz-topic-row__input {
    justify-content: flex-end;
  }
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-mode-panel {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 12px;
  background: rgba(250, 250, 252, 0.95);
  border: 1px solid rgba(42, 47, 58, 0.08);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-mode-panel > .kmu7-courseform-subtitle:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit__actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kmu7-admin-line);
}

.kmu7-admin-dashboard .kmu7-admin-courseform-ut-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
}

.kmu7-admin-dashboard .kmu7-course-sdg-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
}

.kmu7-admin-dashboard .kmu7-course-sdg-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.kmu7-admin-dashboard .kmu7-course-sdg-pick input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  align-self: flex-start;
}

.kmu7-admin-dashboard .kmu7-course-sdg-pick__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.4rem;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 12px;
  background: #fafafa;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.kmu7-admin-dashboard .kmu7-course-sdg-pick__img {
  display: block;
  width: 100%;
  max-width: 72px;
  height: auto;
}

.kmu7-admin-dashboard .kmu7-course-sdg-pick__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kmu7-admin-ink);
  line-height: 1.2;
}

.kmu7-admin-dashboard .kmu7-course-sdg-pick:has(input:checked) .kmu7-course-sdg-pick__card {
  border-color: var(--kmu7-admin-brand);
  background: #fff7f2;
  box-shadow: 0 0 0 1px rgba(242, 101, 34, 0.18);
}

@media (max-width: 900px) {
  .kmu7-admin-dashboard .kmu7-course-sdg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .kmu7-admin-dashboard .kmu7-course-sdg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Registration course history: admin-cancelled results remain visible but subdued. */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table .kmu7-admin-course-history-row--cancelled td {
  background: #f8fafc;
  color: #94a3b8;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table .kmu7-admin-course-history-row--cancelled:hover td {
  background: #f8fafc;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-course-history-row--cancelled .kmu7-admin-course-history-title {
  color: #94a3b8;
  opacity: 0.72;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.kmu7-admin-dashboard .kmu7-admin-course-cancelled-badge {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 0.4rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid #fecaca;
  border-radius: 999px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 0.78em;
  font-weight: 750;
  line-height: 1.3;
}

.kmu7-admin-dashboard .kmu7-admin-course-cancelled-at {
  display: block;
  margin-top: 0.25rem;
  color: #94a3b8;
  font-size: 0.75em;
}

/* Registrations filter actions: keep apply/reset visible as equal theme buttons. */
.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__action-wrap {
  flex: 0 1 330px;
  min-width: 270px;
  max-width: 360px;
}

.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__filter-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__filter-actions .kmu7-btn {
  width: 100%;
  min-height: calc((0.65rem * 2) + 1.25em);
  padding: 0.65rem 0.7rem;
  font-size: 1rem;
  line-height: 1.25;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__reset {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

.kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__reset:hover {
  background: #ffffff;
  color: var(--kmu7-admin-brand-deep);
  border-color: #ffffff;
}

@media (max-width: 560px) {
  .kmu7-admin-dashboard .kmu7-reg-filter-bar .kmu7-admin-toolbar__action-wrap {
    flex-basis: 100%;
    min-width: 100%;
    max-width: none;
  }
}

.kmu7-admin-dashboard .kmu7-course-tree {
  margin: 0.5rem 0 1rem;
  padding-left: 0;
  list-style: none;
}
.kmu7-admin-dashboard .kmu7-course-tree fieldset {
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  background: #fafafa;
}
.kmu7-admin-dashboard .kmu7-course-tree legend {
  padding: 0 0.35rem;
  font-weight: 700;
  color: var(--kmu7-admin-ink);
  font-size: calc(0.95rem * 1.08);
}
.kmu7-admin-dashboard .kmu7-course-tree__dept {
  margin: 0.4rem 0 0.4rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
.kmu7-admin-dashboard .kmu7-course-cert-validity-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin: 0 0 0 1.65rem;
  padding: 0.5rem 0.75rem;
  background: #f8f9fb;
  border-radius: 10px;
  border: 1px solid var(--kmu7-admin-line);
  max-width: 22rem;
}
.kmu7-admin-dashboard .kmu7-course-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: #fff7f4;
  border-radius: 14px;
  border: 1px solid rgba(242, 101, 34, 0.22);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-delete .kmu7-btn--danger {
  width: auto;
  margin: 0.35rem 0 0;
}

/*
 * course_form: +20% ตัวอักษร (ทับค่าเดิมใน courseform + 1.4x จาก reg-edit)
 * ยกเว้น: หัวข้อแถบ "ผู้เรียนเป้าหมาย" และแถวเช็คประเภทผู้ใช้ (.kmu7-admin-courseform-ut-grid)
 */
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-pageheader__title {
  font-size: calc(1.6rem * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-pageheader__meta,
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-pageheader__lead {
  font-size: calc(0.95rem * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-alert {
  font-size: calc(0.9rem * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit .kmu7-field label {
  font-size: calc(0.875rem * 1.4 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit .kmu7-admin-courseform-ut-grid.kmu7-field .kmu7-check {
  font-size: calc(0.875rem * 1.4);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit .kmu7-hint {
  font-size: calc(0.8rem * 1.4 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit .kmu7-input,
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit .kmu7-select,
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit .kmu7-textarea {
  font-size: calc(1rem * 1.4 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit .kmu7-section-title {
  font-size: calc(0.8rem * 1.4 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-reg-edit__actions .kmu7-btn {
  font-size: calc(0.95rem * 1.4 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section__bar {
  font-size: calc(1.12rem * 1.3 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--access > .kmu7-courseform-section__bar {
  font-size: calc(1.12rem * 1.3);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section__icon {
  width: calc(2.25rem * 1.3 * 1.2);
  height: calc(2.25rem * 1.3 * 1.2);
  font-size: calc(1rem * 1.3 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section--access > .kmu7-courseform-section__bar .kmu7-courseform-section__icon {
  width: calc(2.25rem * 1.3);
  height: calc(2.25rem * 1.3);
  font-size: calc(1rem * 1.3);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-section__lede {
  font-size: calc(0.9rem * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-courseform-subtitle {
  font-size: calc(0.98rem * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-tree legend {
  font-size: calc(0.95rem * 1.08 * 1.2 * 1.15);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-bulk .kmu7-check {
  font-size: calc(0.875rem * 1.4 * 1.2);
}
/* tree fieldset: whole_aff + vis_dept — ขนาดตัวอักษรและช่อง checkbox ให้เท่ากัน */
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-tree fieldset .kmu7-check {
  font-size: calc(0.875rem * 1.4 * 1.2);
  font-weight: 400;
  color: var(--kmu7-admin-ink-muted);
  align-items: flex-start;
  gap: 0.65rem;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-course-tree fieldset .kmu7-check input[type="checkbox"] {
  width: calc(1.05rem * 1.2);
  height: calc(1.05rem * 1.2);
  min-width: calc(1.05rem * 1.2);
  min-height: calc(1.05rem * 1.2);
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-lesson-block__title {
  font-size: calc(1rem * 1.4 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-btn--sm {
  font-size: calc(0.82rem * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-courseform-delete .kmu7-section-title {
  font-size: calc(0.8rem * 1.4 * 1.2);
}
.kmu7-admin-dashboard .kmu7-admin-courseform-page .kmu7-admin-courseform-delete .kmu7-admin-detail-hint {
  font-size: calc(0.92rem * 1.2);
}

/* course_form: บทเรียน / รูปปก */
.kmu7-admin-dashboard .kmu7-lesson-block {
  margin: 0.75rem 0;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fafafa;
}
.kmu7-admin-dashboard .kmu7-lesson-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.kmu7-admin-dashboard .kmu7-lesson-block__title {
  font-weight: 700;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-course-cover-preview {
  margin-bottom: 0.5rem;
  max-width: 100%;
  overflow: hidden;
}

.kmu7-admin-dashboard .kmu7-course-cover-preview__img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--kmu7-admin-line);
}

.kmu7-admin-dashboard .kmu7-course-card-preview__img {
  max-width: min(100%, 220px);
  max-height: 320px;
}

.kmu7-admin-dashboard .kmu7-attached-file {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.35rem 0 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--kmu7-admin-line);
  background: #f8fafc;
}

.kmu7-admin-dashboard .kmu7-attached-file > i {
  margin-top: 0.15rem;
  color: var(--kmu7-admin-brand-deep);
  font-size: 1.05rem;
}

.kmu7-admin-dashboard .kmu7-attached-file__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.kmu7-admin-dashboard .kmu7-attached-file__name {
  font-weight: 600;
  color: var(--kmu7-admin-ink);
  word-break: break-word;
}

.kmu7-admin-dashboard .kmu7-attached-file__meta {
  font-size: 0.82rem;
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard a.kmu7-attached-file__name:hover {
  color: var(--kmu7-admin-brand-deep);
}

/* ---------- Admin certificate templates (list) ---------- */
.kmu7-admin-cert-list-page .kmu7-admin-pageheader__tools.kmu7-admin-cert-pageheader__tools {
  flex-wrap: nowrap;
  align-items: center;
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-create-btn.kmu7-btn--primary,
.kmu7-admin-cert-list-page .kmu7-admin-cert-filter-submit.kmu7-btn--primary {
  width: auto;
  margin-top: 0;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(242, 101, 34, 0.38);
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-create-btn.kmu7-btn--primary:hover,
.kmu7-admin-cert-list-page .kmu7-admin-cert-filter-submit.kmu7-btn--primary:hover {
  filter: brightness(1.03);
  color: #ffffff;
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-create-btn.kmu7-btn--primary i,
.kmu7-admin-cert-list-page .kmu7-admin-cert-filter-submit.kmu7-btn--primary i {
  color: #ffffff;
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-filter-card {
  margin-bottom: 1.25rem;
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-course-select {
  flex: 1 1 200px;
  min-width: 12rem;
  max-width: 22rem;
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-table-wrap {
  margin-bottom: 1.5rem;
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-empty-cell {
  text-align: center;
  padding: 1.5rem 1rem !important;
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-cert-list-page .kmu7-admin-cert-empty-cell a {
  color: var(--kmu7-admin-brand-deep);
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-cert-filter-card .kmu7-admin-toolbar {
  margin-bottom: 0;
}
.kmu7-admin-dashboard .kmu7-admin-cert-table .kmu7-admin-cert-courses-cell {
  min-width: 12rem;
  max-width: 22rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-course-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.kmu7-admin-dashboard .kmu7-admin-cert-course-list a {
  color: var(--kmu7-admin-brand-deep);
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-cert-course-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-cert-usage-banner .kmu7-admin-cert-course-list {
  margin-top: 0;
}
.kmu7-admin-dashboard .kmu7-admin-cert-font-row {
  max-width: 28rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-row {
  margin: 0.75rem 0 0;
  max-width: 52rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-swatch {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid var(--kmu7-admin-line);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-swatch.is-active {
  border-color: var(--kmu7-admin-brand);
  outline: 2px solid var(--kmu7-admin-brand);
  outline-offset: 2px;
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-picker-wrap input[type="color"] {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.15rem;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-hex-field {
  flex: 1;
  min-width: 8rem;
  max-width: 12rem;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-cert-color-hex-field .kmu7-input {
  font-family: ui-monospace, monospace;
}
.kmu7-admin-dashboard .kmu7-admin-cert-pos-tools {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 10rem) 1fr;
  gap: 0.75rem 1rem;
  align-items: end;
  margin: 0.75rem 0 0;
  max-width: 52rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-pos-field .kmu7-input {
  width: 100%;
  max-width: 10rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-pos-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 720px) {
  .kmu7-admin-dashboard .kmu7-admin-cert-pos-tools {
    grid-template-columns: 1fr;
  }
  .kmu7-admin-dashboard .kmu7-admin-cert-pos-field .kmu7-input {
    max-width: none;
  }
}
.kmu7-admin-dashboard .kmu7-admin-cert-font-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-font-controls input[type="range"] {
  flex: 1;
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview-wrap {
  margin-top: 0.5rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview-wrap--p2 {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kmu7-admin-line);
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview-wrap .kmu7-courseform-subtitle {
  margin: 0 0 0.65rem;
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview {
  position: relative;
  width: 100%;
  max-width: 920px;
  aspect-ratio: 297 / 210;
  margin: 0 auto;
  background: #e8eaef;
  border-radius: 12px;
  border: 1px solid var(--kmu7-admin-line);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview--static {
  pointer-events: none;
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--kmu7-admin-ink-muted);
  background: repeating-linear-gradient(
    -45deg,
    #f4f5f7,
    #f4f5f7 8px,
    #eceef2 8px,
    #eceef2 16px
  );
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview__name {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0.15rem 0.35rem;
  font-family: "DB Helvethaica X", var(--font);
  font-weight: 700;
  font-style: normal;
  color: #1a1a1a; /* ค่าเริ่มต้น — แทนที่ด้วย inline style จากฟอร์ม */
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  touch-action: none;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
  line-height: 1.15;
}
.kmu7-admin-cert-form-page .kmu7-admin-cert-preview__name {
  font-family: "DB Helvethaica X", var(--font) !important;
  font-weight: 700 !important;
}
.kmu7-admin-dashboard .kmu7-admin-cert-form-page .kmu7-admin-cert-form-actions {
  padding-top: 1rem;
  border-top: 1px solid var(--kmu7-admin-line);
}
.kmu7-admin-dashboard .kmu7-admin-cert-pdf-hint {
  line-height: 1.45;
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-dashboard .kmu7-admin-cert-file-warn {
  margin-top: 0.35rem;
  color: #b45309;
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview__name:active {
  cursor: grabbing;
}
.kmu7-admin-dashboard .kmu7-admin-cert-preview-meta {
  text-align: center;
  margin-top: 0.5rem;
}

/* Safety card — พรีวิวบัตรที่ออกแล้วในหน้าแอดมิน */
.kmu7-admin-safety-issue-preview-card {
  margin-top: 1.25rem;
}
.kmu7-admin-dashboard .kmu7-admin-safety-issue-preview {
  max-width: 920px;
}
.kmu7-admin-dashboard .kmu7-admin-safety-issue-preview .kmu7-safety-card-frame {
  max-width: 100%;
}
.kmu7-admin-safety-issue-preview-frame {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 720px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #eef1f5;
}

/* Safety card template editor — 8.6×5.4 cm landscape */
.kmu7-admin-dashboard .kmu7-admin-safety-preview {
  max-width: 920px;
  aspect-ratio: 86 / 54;
}
.kmu7-admin-dashboard .kmu7-admin-safety-previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
  align-items: start;
}
.kmu7-admin-dashboard .kmu7-admin-safety-previews .kmu7-admin-cert-preview-wrap {
  margin-top: 0;
}
.kmu7-admin-dashboard .kmu7-admin-safety-previews .kmu7-admin-cert-preview-meta--spacer {
  visibility: hidden;
}
.kmu7-admin-safety-visible-panel {
  border: 1px solid var(--kmu7-admin-border, #e2e8f0);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem 1rem;
  margin: 0 0 1rem;
  background: var(--kmu7-admin-surface-muted, #f8fafc);
}
.kmu7-admin-safety-visible-panel > .kmu7-courseform-subtitle {
  margin: 0 0 0.35rem;
  padding: 0;
  float: none;
  width: auto;
  border-top: none;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-visible-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 2.25rem;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-visible-toggle {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--kmu7-admin-ink, #1e293b) !important;
  background: #fff !important;
  border: 1px solid var(--kmu7-admin-line, #cbd5e1) !important;
  opacity: 0.55;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-visible-toggle.is-on {
  opacity: 1;
  background: var(--kmu7-admin-accent, #1d4ed8) !important;
  border-color: var(--kmu7-admin-accent, #1d4ed8) !important;
  color: #fff !important;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-visible-toggle:hover {
  opacity: 1;
}
.kmu7-admin-dashboard .kmu7-admin-safety-field-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-safety-field-tab.is-field-hidden {
  opacity: 0.45;
}
.kmu7-admin-dashboard .kmu7-admin-safety-field-tab.is-active {
  background: var(--kmu7-admin-accent, #1d4ed8);
  color: #fff;
  border-color: transparent;
}
.kmu7-admin-dashboard .kmu7-admin-safety-controls {
  margin-bottom: 0.5rem;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field {
  font-family: "DB Helvethaica X", var(--font) !important;
  cursor: pointer;
  max-width: 92%;
}
.kmu7-admin-safety-form-page .kmu7-admin-cert-preview__name.kmu7-admin-safety-preview__field {
  font-weight: 400;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field--wrap {
  white-space: normal;
  line-height: 1.2;
}
/* ภาควิชา/คณะ — บังคับขึ้นบรรทัดตาม \n เท่านั้น (ไม่ต่อคณะต่อท้ายบรรทัดภาควิชา) */
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field--unit-lines {
  white-space: pre-line;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  max-width: 88%;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field.is-active {
  outline: 2px dashed var(--kmu7-admin-accent, #1d4ed8);
  outline-offset: 2px;
  cursor: grab;
  z-index: 3;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field.is-active:active {
  cursor: grabbing;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field--no-detect,
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field--no-detect .kmu7-safety-no-detect,
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field--no-detect a {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: currentColor;
}
.kmu7-admin-safety-form-page .kmu7-admin-safety-preview__field--date {
  white-space: nowrap;
  max-width: none;
  width: max-content;
}
.kmu7-admin-safety-form-page .kmu7-input--mono {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.08em;
}
.kmu7-admin-safety-size-panel {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--kmu7-admin-line, #e2e8f0);
  background: var(--kmu7-admin-brand-soft, #fff7ed);
}
.kmu7-admin-safety-size-panel .kmu7-courseform-subtitle {
  margin: 0 0 0.65rem;
}
.kmu7-admin-safety-size-dl {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.92rem;
}
.kmu7-admin-safety-size-dl dt {
  margin: 0;
  font-weight: 600;
  color: var(--kmu7-admin-ink-muted, #64748b);
}
.kmu7-admin-safety-size-dl dd {
  margin: 0;
}
.kmu7-admin-safety-size-warn {
  color: #b45309;
}
.kmu7-admin-safety-size-pending {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--kmu7-admin-line, #e2e8f0);
}
.kmu7-admin-safety-size-pending-list {
  margin: 0;
  padding-left: 1.2rem;
}

/* Safety card — QR ยืนยัน (ไม่มีกรอบ/พื้นขาวรอบนอก — ขาวเฉพาะในตัว QR เพื่อให้สแกนได้) */
.kmu7-safety-card-face__qr,
.kmu7-admin-safety-preview__qr {
  position: absolute;
  z-index: 2;
  background: transparent;
  padding: 0;
  box-shadow: none;
  line-height: 0;
  overflow: visible;
}
/* บัตรผู้เรียน — ห้ามตัดมุม QR (มุมสี่เหลี่ยมจำเป็นต่อสแกนเนอร์) */
.kmu7-safety-card-face__qr {
  border-radius: 0;
}
.kmu7-admin-safety-preview__qr {
  border-radius: 3px;
  overflow: hidden;
}
.kmu7-admin-safety-preview__qr {
  cursor: grab;
}
.kmu7-admin-safety-preview__qr.is-active {
  outline: 2px dashed var(--kmu7-admin-accent, #1d4ed8);
  outline-offset: 2px;
  z-index: 3;
}
.kmu7-admin-safety-preview__qr.is-active:active {
  cursor: grabbing;
}
.kmu7-safety-card-face__qr img,
.kmu7-safety-card-face__qr canvas,
.kmu7-admin-safety-preview__qr img,
.kmu7-admin-safety-preview__qr canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.kmu7-safety-verify-page {
  margin: 0;
  min-height: 100vh;
  background: #eef1f5;
  font-family: var(--font);
  color: #1a1a1a;
}
.kmu7-safety-verify {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}
.kmu7-safety-verify__eyebrow {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.kmu7-safety-verify__title {
  margin: 0.2rem 0 0;
  font-size: 1.45rem;
}
.kmu7-safety-verify__checked {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #64748b;
}
.kmu7-safety-verify__status {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
}
.kmu7-safety-verify__status--valid {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}
.kmu7-safety-verify__status--expired {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
.kmu7-safety-verify__status--invalid {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.kmu7-safety-verify__status-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
}
.kmu7-safety-verify__status-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.92rem;
}
.kmu7-safety-verify__facts {
  margin: 1rem 0 0;
  padding: 0;
}
.kmu7-safety-verify__facts > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.35rem 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(42, 47, 58, 0.08);
}
.kmu7-safety-verify__facts dt {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
}
.kmu7-safety-verify__facts dd {
  margin: 0;
  font-weight: 600;
}
.kmu7-safety-verify__foot {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.45;
}

/* Safety card — ป้องกันแคปหน้าจอ (หน้าผู้เรียนเท่านั้น) */
.kmu7-safety-capture-guard-page .kmu7-safety-capture-protected {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.kmu7-safety-capture-guard-page .kmu7-safety-capture-protected img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.kmu7-safety-capture-shield {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  z-index: 2147483646;
  pointer-events: none;
}
html.kmu7-safety-capture-shielded .kmu7-safety-capture-shield {
  display: block !important;
}
html.kmu7-safety-capture-shielded .kmu7-safety-capture-protected {
  visibility: hidden !important;
}
html.kmu7-safety-capture-shielded,
html.kmu7-safety-capture-shielded body.kmu7-safety-mobile-preview-page {
  background: #000 !important;
}

/* Safety card — mobile preview (เปิดจากมือถือ) */
.kmu7-safety-mobile-preview-page {
  margin: 0;
  min-height: 100vh;
  background: #eef1f5;
  font-family: var(--font);
  color: #1a1a1a;
}
.kmu7-safety-mobile-preview {
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 0.65rem 2rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.kmu7-safety-mobile-preview--denied {
  padding: 2rem 1.25rem;
  text-align: center;
  color: #64748b;
}
.kmu7-safety-mobile-preview__head {
  margin-bottom: 1.25rem;
  text-align: center;
}
.kmu7-safety-mobile-preview__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.kmu7-safety-mobile-preview__lead,
.kmu7-safety-mobile-preview__foot {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.45;
}
.kmu7-safety-mobile-preview__block {
  margin-bottom: 1.5rem;
}
.kmu7-safety-mobile-preview__label {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: #475569;
}
.kmu7-safety-card-frame {
  max-width: 100%;
  margin: 0 auto;
  padding: 3px;
  border-radius: 6px;
  background: linear-gradient(160deg, #d4d4d4 0%, #ececec 45%, #d8d8d8 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 3px 10px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.1);
}
.kmu7-safety-card-face {
  position: relative;
  width: 100%;
  aspect-ratio: 86 / 54;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
}
.kmu7-safety-card-face__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
/* หน้าบัตรจริงของผู้เรียน — โฟกัสที่บัตร ไม่เหมือนหน้าตัวอย่างแอดมิน */
.kmu7-safety-mobile-preview-page--learner {
  background: #1e293b;
}
.kmu7-safety-mobile-preview--learner {
  max-width: 100%;
  padding: 0.5rem 0.5rem 1.5rem;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-mobile-preview__learner-head {
  margin: 0 0 0.85rem;
  text-align: center;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-mobile-preview__learner-head .kmu7-safety-mobile-preview__title {
  color: #f8fafc;
  font-size: 1.2rem;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-mobile-preview__learner-head .kmu7-safety-mobile-preview__lead {
  margin-top: 0.25rem;
  color: #94a3b8;
  font-size: 0.86rem;
}
.kmu7-safety-fullnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.kmu7-safety-fullnav__back {
  align-self: flex-start;
  color: #cbd5e1;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.kmu7-safety-fullnav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}
.kmu7-safety-fullnav__change {
  color: #fdba74;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}
.kmu7-safety-fullnav__change:hover {
  color: #fff;
}
.kmu7-safety-fullnav__back:hover {
  color: #fff;
}
.kmu7-safety-fullnav__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.kmu7-safety-fullnav__tab {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kmu7-safety-fullnav__tab.is-active {
  border-color: #fb923c;
  background: rgba(251, 146, 60, 0.18);
  color: #fdba74;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-card-frame {
  max-width: min(100%, 420px);
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-card-face {
  background: #fff;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-mobile-preview__foot {
  color: #94a3b8;
  margin-top: 0.75rem;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-a2hs-bar {
  max-width: min(100%, 420px);
  margin: 1.1rem auto 0;
  padding: 0.35rem 0 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-a2hs-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(226, 232, 240, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  max-width: 15rem;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-a2hs-btn:active {
  background: rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-a2hs-hint {
  color: rgba(148, 163, 184, 0.65);
  font-size: 0.72rem;
  margin-top: 0.35rem;
}
.kmu7-safety-mobile-preview--learner .kmu7-safety-view-hint {
  max-width: min(100%, 420px);
  margin-left: auto;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #e2e8f0;
}
.kmu7-safety-card-face__empty {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #94a3b8;
  background: #f8fafc;
}
.kmu7-safety-card-face__text {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  max-width: 92%;
  line-height: 1.15;
  white-space: nowrap;
  font-family: "DB Helvethaica X", var(--font) !important;
  pointer-events: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* ป้องกัน iOS/Android เปลี่ยนรหัสตัวเลขเป็นลิงก์โทรศัพท์ */
.kmu7-safety-card-face__text--no-detect,
.kmu7-safety-card-face__text--no-detect .kmu7-safety-no-detect,
.kmu7-safety-card-face__text--no-detect a {
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: currentColor;
  pointer-events: none;
}
.kmu7-safety-card-face__text--date {
  white-space: nowrap;
  max-width: none;
  width: max-content;
}
.kmu7-safety-card-face__text--wrap {
  white-space: normal;
  line-height: 1.2;
}
.kmu7-safety-card-face__text--unit-lines {
  white-space: pre-line;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  max-width: 88%;
}
.kmu7-safety-mobile-preview__foot {
  margin-top: 0.5rem;
  text-align: center;
}
.kmu7-safety-expired-alert {
  margin: 0.5rem 0 0;
}
.kmu7-safety-view-hint {
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: #ecfdf5;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 0.86rem;
  text-align: center;
  line-height: 1.4;
}
.kmu7-safety-demo-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}
.kmu7-safety-a2hs-bar {
  margin: 1rem auto 0;
  padding: 0.5rem 0 0;
  text-align: center;
}
.kmu7-safety-a2hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  max-width: 15rem;
  margin: 0 auto;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(71, 85, 105, 0.9);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kmu7-safety-a2hs-btn:active {
  background: rgba(255, 255, 255, 0.75);
  color: #475569;
}
.kmu7-safety-a2hs-btn__icon {
  display: inline-flex;
  flex-shrink: 0;
}
.kmu7-safety-a2hs-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: rgba(100, 116, 139, 0.7);
  line-height: 1.35;
}
/* Safety card — action sheet เพิ่มไปหน้าจอโฮม */
.kmu7-safety-a2hs-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.5rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}
.kmu7-safety-a2hs-sheet[hidden] {
  display: none !important;
}
.kmu7-safety-a2hs-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
}
.kmu7-safety-a2hs-sheet__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  border-radius: 14px 14px 12px 12px;
  background: #f2f2f7;
  box-shadow: 0 -6px 32px rgba(15, 23, 42, 0.2);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--font), sans-serif;
}
.kmu7-safety-a2hs-sheet__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.75rem 0.65rem;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.kmu7-safety-a2hs-sheet__thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e2e8f0;
}
.kmu7-safety-a2hs-sheet__meta {
  flex: 1;
  min-width: 0;
}
.kmu7-safety-a2hs-sheet__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kmu7-safety-a2hs-sheet__url {
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kmu7-safety-a2hs-sheet__head-close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.kmu7-safety-a2hs-sheet__browser-badge {
  margin: 0;
  padding: 0.35rem 0.75rem 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  text-align: center;
}
.kmu7-safety-a2hs-sheet__browser-badge:empty {
  display: none;
}
.kmu7-safety-a2hs-sheet__browser-hint {
  margin: 0;
  padding: 0.35rem 0.75rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #475569;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.kmu7-safety-a2hs-sheet__browser-hint[hidden] {
  display: none !important;
}
.kmu7-safety-a2hs-sheet[data-browser="ios-chrome"] .kmu7-safety-a2hs-sheet__browser-hint,
.kmu7-safety-a2hs-sheet[data-browser="ios-firefox"] .kmu7-safety-a2hs-sheet__browser-hint {
  background: #fff7ed;
  color: #9a3412;
}
.kmu7-safety-a2hs-sheet[data-browser="android-chrome"] .kmu7-safety-a2hs-sheet__action-icon--add,
.kmu7-safety-a2hs-sheet[data-browser="android-edge"] .kmu7-safety-a2hs-sheet__action-icon--add {
  color: #16a34a;
}
.kmu7-safety-a2hs-sheet__actions {
  margin: 0.45rem 0.5rem 0;
  padding: 0;
  list-style: none;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.kmu7-safety-a2hs-sheet__action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kmu7-safety-a2hs-sheet__actions li:last-child .kmu7-safety-a2hs-sheet__action {
  border-bottom: none;
}
.kmu7-safety-a2hs-sheet__action:active {
  background: #f1f5f9;
}
.kmu7-safety-a2hs-sheet__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  color: #334155;
  flex-shrink: 0;
}
.kmu7-safety-a2hs-sheet__action-icon--add {
  color: #2563eb;
}
.kmu7-safety-a2hs-sheet__cancel {
  display: block;
  width: calc(100% - 1rem);
  margin: 0.45rem 0.5rem 0.5rem;
  padding: 0.85rem;
  border: none;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
}
.kmu7-safety-a2hs-toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 1001;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #f8fafc;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.kmu7-safety-a2hs-toast[hidden] {
  display: none !important;
}
body.kmu7-safety-a2hs-sheet-open {
  overflow: hidden;
}
.kmu7-safety-a2hs-safari-coach {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0.75rem;
  padding-bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 3.5rem));
  pointer-events: none;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 45%);
}
.kmu7-safety-a2hs-safari-coach[hidden] {
  display: none !important;
}
.kmu7-safety-a2hs-safari-coach__panel {
  pointer-events: auto;
  width: 100%;
  max-width: 22rem;
  padding: 0.75rem 0.85rem 0.65rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.kmu7-safety-a2hs-safari-coach__text {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #0f172a;
}
.kmu7-safety-a2hs-safari-coach__share-glyph {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 0.1rem;
  color: #2563eb;
}
.kmu7-safety-a2hs-safari-coach__arrow {
  display: block;
  font-size: 1.4rem;
  line-height: 1;
  color: #2563eb;
  animation: kmu7-safety-a2hs-bounce 1.2s ease-in-out infinite;
}
@keyframes kmu7-safety-a2hs-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.kmu7-safety-a2hs-safari-coach__close {
  margin-top: 0.5rem;
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: 6px;
  background: #f1f5f9;
  font-family: inherit;
  font-size: 0.85rem;
  color: #475569;
  cursor: pointer;
}

/* Safety card — หน้าแจ้งบัตรหมดอายุ */
.kmu7-safety-expired-page-body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding-top: max(1.5rem, env(safe-area-inset-top));
}
.kmu7-safety-expired-page {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0 0.85rem 2rem;
}
.kmu7-safety-expired-card {
  padding: 1.35rem 1.15rem 1.25rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
  text-align: center;
}
.kmu7-safety-expired-card__icon {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
  color: #ea580c;
}
.kmu7-safety-expired-card__title {
  margin: 0 0 1rem;
  line-height: 1.35;
}
.kmu7-safety-expired-card__title-th {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
}
.kmu7-safety-expired-card__title-en {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
}
.kmu7-safety-expired-card__message {
  margin-bottom: 1rem;
  text-align: left;
}
.kmu7-safety-expired-card__para {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #334155;
}
.kmu7-safety-expired-card__para:last-child {
  margin-bottom: 0;
}
.kmu7-safety-expired-card__para--en {
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  color: #475569;
}
.kmu7-safety-expired-card__meta {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #f8fafc;
  text-align: left;
  font-size: 0.88rem;
}
.kmu7-safety-expired-card__meta-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.65rem;
  margin-bottom: 0.45rem;
}
.kmu7-safety-expired-card__meta-row:last-child {
  margin-bottom: 0;
}
.kmu7-safety-expired-card__meta dt {
  margin: 0;
  font-weight: 600;
  color: #64748b;
}
.kmu7-safety-expired-card__meta-en {
  font-size: 0.8rem;
  font-weight: 500;
}
.kmu7-safety-expired-card__meta dd {
  margin: 0;
  grid-column: 2;
  color: #0f172a;
}
.kmu7-safety-expired-card__course {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #475569;
}
.kmu7-safety-expired-card__course-label {
  display: inline;
  margin-right: 0.35rem;
  font-weight: 600;
}
.kmu7-safety-expired-card__course-label--en {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
}
.kmu7-safety-expired-card__course-en {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
}
.kmu7-safety-expired-card__cta {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #ea580c;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
}
.kmu7-safety-expired-card__cta:active {
  background: #c2410c;
}
.kmu7-safety-expired-card__cta-th {
  display: block;
  font-size: 1rem;
}
.kmu7-safety-expired-card__cta-en {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 500;
  opacity: 0.92;
}
.kmu7-safety-expired-card__footnote {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #94a3b8;
  text-align: left;
}
.kmu7-safety-expired-card__footnote--en {
  margin-top: 0.35rem;
  font-style: italic;
}

.kmu7-admin-safety-preview-link-card {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--kmu7-admin-line, #e2e8f0);
  background: #f8fafc;
}
.kmu7-admin-safety-preview-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.kmu7-admin-safety-preview-link-input {
  flex: 1 1 14rem;
  min-width: 0;
  font-size: 0.85rem;
}
.kmu7-admin-safety-layout-tools {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px dashed var(--kmu7-admin-line, #cbd5e1);
  background: #f8fafc;
}
.kmu7-admin-safety-layout-tools .kmu7-courseform-subtitle {
  margin: 0 0 0.35rem;
}
.kmu7-admin-safety-layout-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.65rem;
}
.kmu7-admin-safety-layout-row__label {
  flex: 0 0 100%;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--kmu7-admin-ink-muted, #64748b);
}
@media (min-width: 520px) {
  .kmu7-admin-safety-layout-row__label {
    flex: 0 0 9.5rem;
  }
}
.kmu7-admin-safety-layout-row__select {
  flex: 1 1 12rem;
  min-width: 0;
}
.kmu7-admin-safety-layout-save {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--kmu7-admin-line, #e2e8f0);
}

/* Admin main: ghost buttons — ยกเว้นปุ่มใน filter bar ส้ม */
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-btn--ghost:not(.kmu7-admin-toolbar__submit) {
  background: #fff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
}
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-btn--ghost:not(.kmu7-admin-toolbar__submit):hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}

/* Admin tables: --text / badge / danger ออกแบบสำหรับ UI มืด — บนตารางพื้นขาวอ่านไม่ออก */
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-btn--danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.45);
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-btn--danger:hover {
  background: #fee2e2;
  color: #991b1b;
  border-color: #ef4444;
}
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-badge {
  border-color: rgba(15, 23, 42, 0.1);
  color: var(--kmu7-admin-ink);
  background: #f3f4f6;
}
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-badge--ok {
  background: #ecfdf5;
  color: #047857;
}
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-badge--warn {
  background: #fffbeb;
  color: #b45309;
}
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-badge--muted {
  background: #f3f4f6;
  color: #6b7280;
}

/* ปุ่มจัดการในตาราง — td ต้องคงเป็น table-cell เพื่อให้เส้นแบ่งแถวตรงกัน */
.kmu7-admin-dashboard .kmu7-admin-table-actions {
  vertical-align: middle;
  min-width: 8.5rem;
  max-width: 12rem;
}
.kmu7-admin-dashboard .kmu7-admin-table-actions__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-start;
}
.kmu7-admin-dashboard .kmu7-admin-table-actions .kmu7-inline-form,
.kmu7-admin-dashboard .kmu7-admin-table .kmu7-admin-actions .kmu7-inline-form {
  display: inline-flex;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-table-actions .kmu7-btn--sm,
.kmu7-admin-dashboard .kmu7-admin-table .kmu7-admin-actions .kmu7-btn--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.1rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.84rem;
  line-height: 1.2;
  white-space: nowrap;
  width: auto;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-table-actions .kmu7-btn--sm i,
.kmu7-admin-dashboard .kmu7-admin-table .kmu7-admin-actions .kmu7-btn--sm i,
.kmu7-admin-dashboard .kmu7-admin-table-actions .kmu7-admin-iconbtn i,
.kmu7-admin-dashboard .kmu7-admin-table .kmu7-admin-actions .kmu7-admin-iconbtn i {
  color: inherit;
  opacity: 1;
  font-size: 1em;
  line-height: 1;
}
.kmu7-admin-dashboard .kmu7-admin-table-actions .kmu7-admin-iconbtn,
.kmu7-admin-dashboard .kmu7-admin-table .kmu7-admin-actions .kmu7-admin-iconbtn {
  flex-shrink: 0;
}

/* legacy_course_passes — card ใน admin main (ยกเว้น filter bar ส้ม) */
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-card:not(.kmu7-reg-filter-bar) {
  background: var(--kmu7-admin-card);
  border: 1px solid var(--kmu7-admin-line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  color: var(--kmu7-admin-ink);
}

/* registrations / reports — filter bar ส้ม ต้องชนะ .kmu7-card ใน admin-main */
.kmu7-admin-dashboard .kmu7-admin-main .kmu7-card.kmu7-reg-filter-bar {
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 50%, var(--kmu7-admin-brand-deep) 100%);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(242, 101, 34, 0.3);
  color: #ffffff;
}

.kmu7-admin-dashboard .kmu7-admin-table td form {
  display: contents;
}

/* legacy: form ในคอลัมน์จัดการ — อย่าใช้ display:contents / inline */
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions form,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child form,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions form,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child form,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child:has(.kmu7-card) form,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner form {
  display: block !important;
  width: 100%;
  margin: 0;
}

/* legacy_course_passes — hook: .kmu7-admin-lcp-actions__inner หรือ .kmu7-admin-lcp-bulk-check */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) {
  --kmu7-lcp-fs: 1.56; /* 0.875rem × 1.3 × 1.2 (+20% จากขนาดปัจจุบัน) */
  --kmu7-lcp-col-course: 18rem;
  table-layout: fixed;
  width: 100%;
  min-width: 72rem;
  font-size: calc(0.875rem * var(--kmu7-lcp-fs));
  border-collapse: collapse;
  border-spacing: 0;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light:has(.kmu7-admin-lcp-actions__inner),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light:has(.kmu7-admin-lcp-bulk-check) {
  overflow-x: auto;
}

/* 10 คอลัมน์: 1=checkbox 2=# 3=รหัส 4=อีเมล 5=ประเภท 6=รายวิชา 7=วันที่ 8=สถานะ 9=อีเมลแจ้ง 10=จัดการ */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:first-child,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:first-child,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) th:first-child,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td:first-child {
  width: 2.35rem;
  min-width: 2.35rem;
  max-width: 2.35rem;
  padding: 0.5rem 0.25rem;
  text-align: center;
  vertical-align: middle;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(2),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(2),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) .kmu7-reg-col-num {
  width: 2.85rem;
  min-width: 2.85rem;
  max-width: 2.85rem;
  padding: 0.5rem 0.3rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(3),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(3) {
  width: 7.25rem;
  min-width: 7.25rem;
  max-width: 7.25rem;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(4),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(4) {
  width: 9.5rem;
  min-width: 9.5rem;
  max-width: 9.5rem;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.35;
}

/* ประเภท (ในระบบ) — col 5 */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(5),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(5) {
  width: calc(6.75rem * 1.15);
  min-width: calc(6.75rem * 1.15);
  max-width: calc(6.75rem * 1.15);
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

/* รายวิชา — col 6: กว้างพออ่าน + บังคับขึ้นบรรทัดใหม่ (ห้ามล้นทับคอลัมน์ข้าง) */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(6),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(6),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td.kmu7-legacy-pass-course,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) th:nth-child(6),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td:nth-child(6),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td.kmu7-legacy-pass-course {
  width: var(--kmu7-lcp-col-course, 18rem);
  min-width: 0;
  max-width: var(--kmu7-lcp-col-course, 18rem);
  vertical-align: middle;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-size: calc(0.8125rem * var(--kmu7-lcp-fs, 1.56));
  overflow: hidden;
  text-overflow: clip;
  hyphens: auto;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(6) *,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td.kmu7-legacy-pass-course *,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td:nth-child(6) *,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td.kmu7-legacy-pass-course * {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* วันที่ออกบัตร — col 7 */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(7),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) th:nth-child(7) {
  width: 7.75rem;
  min-width: 7.75rem;
  max-width: 7.75rem;
  white-space: normal;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
  vertical-align: middle;
  background: #f8fafc;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(7),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td:nth-child(7) {
  width: 7.75rem;
  min-width: 7.75rem;
  max-width: 7.75rem;
  white-space: normal;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: break-word;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #fff;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(7),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td:nth-child(7) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* สถานะ — col 8 */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(8),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) th:nth-child(8) {
  width: 9.25rem;
  min-width: 9.25rem;
  max-width: 9.25rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  background: #f8fafc;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(8),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td:nth-child(8) {
  width: 9.25rem;
  min-width: 9.25rem;
  max-width: 9.25rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #fff;
}

/* อีเมลแจ้ง — col 9 */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:nth-child(9),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) th:nth-child(9) {
  width: 8.75rem;
  min-width: 8.75rem;
  max-width: 8.75rem;
  white-space: normal;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
  background: #f8fafc;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(9),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) td:nth-child(9) {
  width: 8.75rem;
  min-width: 8.75rem;
  max-width: 8.75rem;
  white-space: normal;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #fff;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) tbody tr:hover td:nth-child(7),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) tbody tr:hover td:nth-child(8),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) tbody tr:hover td:nth-child(9),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) tbody tr:hover td:nth-child(7),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) tbody tr:hover td:nth-child(8),
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) tbody tr:hover td:nth-child(9) {
  background: #fff7f4;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(5) .kmu7-badge,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(8) .kmu7-badge,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(9) .kmu7-badge {
  display: inline-flex;
  margin: 0 auto 0.2rem;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  justify-content: center;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(8) .kmu7-badge + *,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td:nth-child(9) .kmu7-badge + * {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.92em;
  line-height: 1.35;
  word-break: break-word;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) .kmu7-admin-lcp-bulk-check {
  display: block;
  margin: 0 auto;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light td.kmu7-admin-actions:has(.kmu7-admin-lcp-actions__inner) {
  display: table-cell !important;
  width: 10.25rem;
  min-width: 10.25rem;
  max-width: 10.25rem;
  vertical-align: middle;
  text-align: center;
  white-space: normal;
  padding: 0.5rem 0.4rem;
  height: auto;
}

/* แถว: td ต้องเป็น table-cell เพื่อให้เส้นตารางตรงทุกคอลัมน์ */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) tbody tr {
  height: auto;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td {
  padding: 0.5rem 0.55rem;
  line-height: 1.4;
  box-sizing: border-box;
  vertical-align: middle;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.08);
  background-clip: padding-box;
}

/* คอลัมน์รายวิชา — จำกัดความกว้าง (ไม่ใช้ flex กินที่เหลือทั้งหมด) */
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) thead th,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-bulk-check) thead th {
  vertical-align: middle;
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.12);
  white-space: normal;
  line-height: 1.35;
  background: #f8fafc;
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) tbody tr:last-child td {
  box-shadow: none;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th.kmu7-reg-col-actions,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:last-child,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td.kmu7-admin-actions {
  width: 10.25rem;
  min-width: 10.25rem;
  max-width: 10.25rem;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th.kmu7-reg-col-actions,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) th:last-child {
  text-align: center;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) td.kmu7-admin-actions {
  white-space: normal;
  text-align: center;
  padding: 0.5rem 0.4rem;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) .kmu7-badge {
  font-size: calc(0.75rem * var(--kmu7-lcp-fs, 1.56));
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-actions__inner.kmu7-admin-lcp-actions__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner > form,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner > a.kmu7-btn {
  display: block !important;
  width: 100%;
  margin: 0;
  text-align: center;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner .kmu7-btn,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner button.kmu7-btn,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner a.kmu7-btn,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner form .kmu7-btn,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner form button[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(2rem * 1.35);
  padding: 0.38rem 0.4rem;
  font-size: calc(0.975rem * var(--kmu7-lcp-fs, 1.56)); /* เพิ่มจาก 0.78rem อีก 25% */
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  margin: 0;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center !important;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner .kmu7-btn i {
  color: inherit;
  opacity: 1;
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-lcp-actions__inner .kmu7-btn--danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

/* ---------- legacy_course_passes: ตารางทั่วไป (ไม่ทับตาราง lcp ที่มี .kmu7-admin-lcp-actions__inner) ---------- */
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk, .kmu7-legacy-pass-bulk-actions) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-table,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-table {
  font-size: 0.875rem;
  table-layout: auto;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) th,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) td,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk, .kmu7-legacy-pass-bulk-actions) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) th,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk, .kmu7-legacy-pass-bulk-actions) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) td,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-table th,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-table td,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-table th,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-table td {
  padding: 0.55rem 0.65rem;
  line-height: 1.35;
  vertical-align: middle;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(2),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(3),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(2),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(3) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(4),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(4) {
  max-width: 11rem;
  word-break: break-word;
  font-size: 0.8125rem;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(6),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td.kmu7-legacy-pass-course,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(6),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td.kmu7-legacy-pass-course {
  vertical-align: top;
  min-width: 11rem;
  max-width: 17rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #475569;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(7),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(8),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(9),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(7),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(8),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(9) {
  vertical-align: top;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(7),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(9),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(7),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:nth-child(9) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) .kmu7-badge,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) .kmu7-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0.18rem 0.45rem;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table:has(.kmu7-admin-lcp-actions__inner) tbody tr:hover td {
  background: #fff7f4;
}

/* คอลัมน์จัดการ — กว้างคงที่ (เฉพาะตารางที่ไม่ใช่ lcp) */
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) th:last-child,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) th:last-child,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child:has(.kmu7-card):not(:has(.kmu7-admin-lcp-actions__inner)) {
  width: 10rem;
  min-width: 10rem;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody tr,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody tr,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table tbody tr:has(td:last-child .kmu7-card):not(:has(.kmu7-admin-lcp-actions__inner)) {
  height: 1px;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) td.kmu7-legacy-pass-actions,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:last-child,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) td.kmu7-legacy-pass-actions,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table:not(:has(.kmu7-admin-lcp-actions__inner)) tbody td:last-child,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child:has(.kmu7-card):not(:has(.kmu7-admin-lcp-actions__inner)) {
  vertical-align: top;
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
  padding: 0;
  height: 100%;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions > div,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child > div,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions > div,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child > div,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child:has(.kmu7-card) > .kmu7-card,
.kmu7-admin-dashboard .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child:has(.kmu7-card) > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.55rem 0.5rem !important;
  margin: 0 !important;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card .kmu7-btn,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions button,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions .kmu7-btn,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions a.kmu7-btn,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child button:not([type="checkbox"]),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child a.kmu7-btn,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card .kmu7-btn,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions button,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions .kmu7-btn,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td.kmu7-legacy-pass-actions a.kmu7-btn,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child button:not([type="checkbox"]),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table tbody td:last-child a.kmu7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  margin: 0;
  border-radius: 8px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td button:not(.kmu7-btn):not([type="checkbox"]),
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button:not(.kmu7-btn),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td button:not(.kmu7-btn):not([type="checkbox"]),
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button:not(.kmu7-btn) {
  background: #fff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td button:not(.kmu7-btn):not([type="checkbox"]):hover,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button:not(.kmu7-btn):hover,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td button:not(.kmu7-btn):not([type="checkbox"]):hover,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button:not(.kmu7-btn):hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td button.kmu7-btn--danger,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button.kmu7-btn--danger,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td button[data-action="revoke"],
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td button[name="revoke"],
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td button.kmu7-btn--danger,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-card button.kmu7-btn--danger,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td button[data-action="revoke"],
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td button[name="revoke"] {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td button i,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-btn i,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td button i,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-admin-table-wrap--light .kmu7-admin-table td .kmu7-btn i {
  color: inherit;
  opacity: 1;
  font-size: 0.95em;
  line-height: 1;
  flex-shrink: 0;
}

/* legacy_course_passes — แถบเลือกส่งอีเมล */
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-bar,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar):has(> button) {
  --kmu7-lcp-bulk-scale: 1.25;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(0.55rem * var(--kmu7-lcp-bulk-scale));
  align-items: center;
  align-content: flex-start;
  margin: 0 0 0.85rem;
  padding: calc(1rem * var(--kmu7-lcp-bulk-scale)) calc(1.15rem * var(--kmu7-lcp-bulk-scale));
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 231, 214, 0.55) 0%, #fffaf7 52%, #ffffff 100%);
  border: 1px solid rgba(242, 101, 34, 0.2);
  box-shadow: 0 8px 22px rgba(242, 101, 34, 0.1);
}

/* กลุ่มปุ่มย่อย — flatten ให้ปุ่มทุกตัวอยู่แถวเดียวกัน */
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-actions,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk-actions,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk-actions,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk-actions,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > div:not(.kmu7-admin-lcp-bulk-meta):not(.kmu7-legacy-pass-bulk-meta):not(.kmu7-legacy-pass-meta),
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > div:not(.kmu7-admin-lcp-bulk-meta):not(.kmu7-legacy-pass-bulk-meta):not(.kmu7-legacy-pass-meta) {
  display: contents;
}

.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk {
  --kmu7-lcp-bulk-scale: 1.25;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(0.55rem * var(--kmu7-lcp-bulk-scale));
  align-items: center;
  margin: 0.85rem 0 0;
  padding: 0.85rem 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
}

.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk-actions,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk-actions {
  display: contents;
}

/* ปุ่มแถบส่งอีเมล — รองรับทั้ง class เก่า/ใหม่ และปุ่ม HTML ธรรมดา */
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk-actions button,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk button,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk-actions button,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk .kmu7-btn,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk-actions button,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk button,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk-actions button,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk .kmu7-btn,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-actions button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-bar button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk-actions button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk button,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.45rem * var(--kmu7-lcp-bulk-scale, 1.25));
  min-height: calc(2.35rem * var(--kmu7-lcp-bulk-scale, 1.25));
  padding: calc(0.5rem * var(--kmu7-lcp-bulk-scale, 1.25)) calc(1rem * var(--kmu7-lcp-bulk-scale, 1.25));
  font-size: calc(0.9rem * var(--kmu7-lcp-bulk-scale, 1.25));
  font-weight: 600;
  font-family: inherit;
  line-height: 1.25;
  border-radius: calc(10px * var(--kmu7-lcp-bulk-scale, 1.25));
  border: 1px solid rgba(242, 101, 34, 0.35);
  background: #ffffff;
  color: var(--kmu7-admin-brand-deep);
  cursor: pointer;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* ปุ่มหลัก — ส่งอีเมลที่เลือก */
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > button:first-child,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > button:first-child,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > button:first-of-type,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) > button:first-child,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk > button:first-child,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk > button:first-child {
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(242, 101, 34, 0.35);
  font-weight: 700;
  flex: 0 0 auto;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk button:disabled,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk-actions button:disabled,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk button:disabled,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk-actions button:disabled,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk button:disabled,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-actions button:disabled,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > button:disabled,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk button:not(:disabled):hover,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk-actions button:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk button:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk-actions button:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk button:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-actions button:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > button:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) button:not(:disabled):hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
  box-shadow: 0 4px 12px rgba(242, 101, 34, 0.15);
}

.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > button:first-child:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > button:first-child:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > button:first-of-type:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) > button:first-child:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk > button:first-child:not(:disabled):hover,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk > button:first-child:not(:disabled):hover {
  background: linear-gradient(135deg, #ff8f52 0%, var(--kmu7-admin-brand) 45%, #c94a12 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(242, 101, 34, 0.42);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk button i,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk-actions button i,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk button i,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk-actions button i,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk button i,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-actions button i,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > button i,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) button i {
  color: inherit;
  opacity: 1;
  font-size: 1em;
  line-height: 1;
}

.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > button:first-child i,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > button:first-child i,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > button:first-of-type i,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) > button:first-child i {
  color: #ffffff;
}

/* ข้อความอธิบาย — บังคับอยู่ใต้แถวปุ่ม */
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > div:not(:has(button)),
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > div:not(:has(button)),
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > span,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > span,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-legacy-pass-bulk-meta,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-reg-filter-bar .kmu7-legacy-pass-meta,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-legacy-pass-bulk-meta,
.kmu7-admin-dashboard:has(.kmu7-legacy-pass-bulk) .kmu7-reg-filter-bar .kmu7-legacy-pass-meta,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk-meta,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk-meta,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-meta,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk .kmu7-hint,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk .kmu7-hint,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > p,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > p,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-lcp-bulk > small,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-legacy-pass-bulk > small,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) .kmu7-hint,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) p,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-admin-main > *:not(.kmu7-admin-table-wrap--light):not(.kmu7-reg-filter-bar) small {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  order: 10;
  margin: calc(0.45rem * var(--kmu7-lcp-bulk-scale, 1.25)) 0 0;
  padding: 0;
  color: var(--kmu7-admin-ink-muted);
  font-size: calc(0.8125rem * var(--kmu7-lcp-bulk-scale, 1.25));
  line-height: 1.5;
}

.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-bulk-meta,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-legacy-pass-meta,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk-meta,
.kmu7-admin-dashboard:has(.kmu7-admin-lcp-bulk-check) .kmu7-reg-filter-bar .kmu7-admin-lcp-bulk .kmu7-hint {
  color: rgba(255, 255, 255, 0.92);
}

/* legacy_course_passes — แถบส่งอีเมลจริง: ปุ่ม 4 ตัวเรียงบรรทัดเดียว */
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar {
  display: grid;
  grid-template-columns: max-content minmax(max-content, 1fr);
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border: 1px solid rgba(242, 101, 34, 0.22);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 231, 214, 0.72) 0%, #fffaf7 55%, #ffffff 100%);
  box-shadow: 0 8px 22px rgba(242, 101, 34, 0.1);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-email-bar__tools {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.65rem;
  min-width: max-content;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-send-btn,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-tool-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  min-height: 2.65rem;
  margin: 0;
  padding: 0.58rem 1rem;
  border-radius: 11px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  appearance: none;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-send-btn {
  color: #ffffff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.28);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-tool-btn {
  color: var(--kmu7-admin-brand-deep);
  border: 1px solid rgba(242, 101, 34, 0.36);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-send-btn:not(:disabled):hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 52%, #1e40af 100%);
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.34);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-tool-btn:hover {
  transform: translateY(-1px);
  color: var(--kmu7-admin-brand-deep);
  border-color: rgba(242, 101, 34, 0.58);
  background: var(--kmu7-admin-brand-soft);
  box-shadow: 0 5px 13px rgba(242, 101, 34, 0.16);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-send-btn:disabled {
  color: rgba(255, 255, 255, 0.92);
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-send-btn:focus-visible,
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-tool-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 2px;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-main > .kmu7-admin-lcp-bulk-email-bar .kmu7-admin-lcp-bulk-email-bar__hint {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0.05rem 0 0;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* legacy_course_passes — กล่องสถานะการส่งอีเมลแบบหลายรายการ */
.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__panel {
  display: flex;
  flex-direction: column;
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(84vh, 42rem);
  overflow: hidden;
  border: 1px solid rgba(242, 101, 34, 0.28);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.3), 0 8px 24px rgba(242, 101, 34, 0.14);
  font-size: 1rem;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__head {
  flex: 0 0 auto;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(242, 101, 34, 0.18);
  background: linear-gradient(135deg, #fff7f1 0%, #ffffff 100%);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__title-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  color: #ffffff;
  background: linear-gradient(135deg, #ff7a33 0%, #ea580c 100%);
  box-shadow: 0 7px 16px rgba(234, 88, 12, 0.25);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  padding: 1.15rem 1.25rem;
  overflow: hidden;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__status {
  margin: 0;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__progress {
  width: 100%;
  height: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  background: #ffeadf;
  box-shadow: inset 0 1px 2px rgba(124, 45, 18, 0.1);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c 0%, #f26522 55%, #ea580c 100%);
  box-shadow: 0 0 10px rgba(242, 101, 34, 0.34);
  transition: width 0.25s ease;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__current.kmu7-hint {
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.8rem;
  overflow-wrap: anywhere;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  color: #374151;
  background: #f8fafc;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__current:empty {
  display: none;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 4.25rem;
  max-height: 15rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-gutter: stable;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log:empty::before {
  content: "ผลการส่งแต่ละรายการจะแสดงที่นี่";
  display: grid;
  min-height: 4.25rem;
  place-items: center;
  border: 1px dashed #d1d5db;
  border-radius: 11px;
  color: #6b7280;
  background: #fafafa;
  font-size: 0.88rem;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log li {
  position: relative;
  margin: 0;
  padding: 0.65rem 0.75rem 0.65rem 2.25rem;
  overflow-wrap: anywhere;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  background: #f8fafc;
  color: #374151;
  font-size: 0.88rem;
  line-height: 1.45;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log li::before {
  position: absolute;
  top: 0.67rem;
  left: 0.75rem;
  display: inline-grid;
  width: 1.1rem;
  height: 1.1rem;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log li.kmu7-admin-lcp-bulk-log--ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log li.kmu7-admin-lcp-bulk-log--ok::before {
  content: "✓";
  background: #16a34a;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log li.kmu7-admin-lcp-bulk-log--err {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__log li.kmu7-admin-lcp-bulk-log--err::before {
  content: "!";
  background: #dc2626;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__foot {
  flex: 0 0 auto;
  align-items: center;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__foot .kmu7-btn {
  min-height: 2.65rem;
  padding: 0.62rem 1rem;
  border-radius: 11px;
  font-size: 0.92rem;
  font-weight: 800;
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__foot .kmu7-btn--primary {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, #ff7a33 0%, #ea580c 100%);
  box-shadow: 0 5px 14px rgba(234, 88, 12, 0.24);
}

.kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__foot .kmu7-btn--ghost {
  border-color: #d1d5db;
  color: #374151;
  background: #ffffff;
}

@media (max-width: 560px) {
  .kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal {
    padding: 0.75rem;
  }

  .kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal__panel {
    width: 100%;
    max-height: 90vh;
    border-radius: 16px;
  }

  .kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__head,
  .kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__body,
  .kmu7-admin-dashboard.kmu7-admin-legacy-course-passes-page .kmu7-admin-lcp-bulk-modal .kmu7-admin-modal__foot {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

.kmu7-admin-dashboard .kmu7-course-target-wrap.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.kmu7-admin-dashboard .kmu7-course-cover-preview__img--live,
.kmu7-admin-dashboard .kmu7-course-cover-preview--live .kmu7-course-cover-preview__img {
  display: block;
  max-width: min(100%, 720px);
  max-height: 360px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--kmu7-admin-line);
  margin-top: 0.35rem;
}

/* ---------- Admin affiliations: table + edit modal ---------- */
.kmu7-admin-dashboard .kmu7-admin-aff-table-wrap {
  margin-bottom: 1.5rem;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table .kmu7-admin-aff-col-sort {
  width: 5.5rem;
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table .kmu7-admin-dept-col-code {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kmu7-admin-dashboard .kmu7-admin-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.kmu7-admin-dashboard .kmu7-admin-table-sort:hover {
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-table-sort.is-active {
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-table-sort i {
  font-size: 0.82em;
  opacity: 0.72;
}
.kmu7-admin-dashboard .kmu7-admin-table-sort.is-active i {
  opacity: 1;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table .kmu7-admin-aff-col-actions {
  width: 1%;
  max-width: 24rem;
  white-space: nowrap;
  vertical-align: middle;
  overflow-x: auto;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__row--inactive td {
  color: var(--kmu7-admin-ink-muted);
  background: #fafafa;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__badge {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.18);
  color: #4b5563;
  vertical-align: middle;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-width: min-content;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__inline-form {
  display: inline-flex;
  margin: 0;
  flex-shrink: 0;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__inline-form .kmu7-btn {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__actions .kmu7-btn--ghost {
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__actions .kmu7-btn--ghost:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__actions .kmu7-btn--danger {
  background: #dc2626;
  border: 1px solid #b91c1c;
  color: #ffffff;
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-aff-table__actions .kmu7-btn--danger:hover {
  background: #b91c1c;
  border-color: #991b1b;
  color: #ffffff;
}

.kmu7-admin-dashboard .kmu7-admin-aff-table .kmu7-admin-dept-col-aff {
  max-width: 14rem;
  word-break: break-word;
  color: var(--kmu7-admin-ink-muted);
  font-weight: 600;
  font-size: 0.95em;
}

.kmu7-admin-dashboard .kmu7-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-modal[hidden] {
  display: none;
}
.kmu7-admin-dashboard .kmu7-admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  cursor: pointer;
}
.kmu7-admin-dashboard .kmu7-admin-modal__panel {
  position: relative;
  width: min(100%, 520px);
  max-height: min(92vh, 680px);
  overflow: auto;
  background: var(--kmu7-admin-card);
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
  font-size: 1.2em;
  color: var(--kmu7-admin-ink);
}
.kmu7-admin-dashboard .kmu7-admin-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.5rem;
  border-bottom: 1px solid var(--kmu7-admin-line);
}
.kmu7-admin-dashboard .kmu7-admin-modal__title {
  margin: 0;
  font-size: 1.44rem;
  font-weight: 800;
  color: var(--kmu7-admin-ink);
  line-height: 1.25;
}
.kmu7-admin-dashboard .kmu7-admin-modal__close {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--kmu7-admin-ink-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.kmu7-admin-dashboard .kmu7-admin-modal__close:hover {
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
}
.kmu7-admin-dashboard .kmu7-admin-modal__body {
  padding: 1rem 1.1rem 1.1rem;
}
.kmu7-admin-dashboard .kmu7-admin-modal__body .kmu7-field label {
  color: var(--kmu7-admin-ink);
  font-size: 0.95em;
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-modal__body .kmu7-input {
  background: #ffffff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
  font-size: 1em;
}
.kmu7-admin-dashboard .kmu7-admin-modal__body .kmu7-input::placeholder {
  color: #6b7280;
  opacity: 1;
}
.kmu7-admin-dashboard .kmu7-admin-modal__body .kmu7-input:focus {
  outline: 2px solid var(--kmu7-admin-brand);
  outline-offset: 1px;
  border-color: rgba(242, 101, 34, 0.45);
}
.kmu7-admin-dashboard .kmu7-admin-modal__body .kmu7-select {
  background: #ffffff;
  color: var(--kmu7-admin-ink);
  border: 1px solid var(--kmu7-admin-line);
  font-size: 1em;
}
.kmu7-admin-dashboard .kmu7-admin-modal__body .kmu7-select:focus {
  outline: 2px solid var(--kmu7-admin-brand);
  outline-offset: 1px;
  border-color: rgba(242, 101, 34, 0.45);
}
.kmu7-admin-dashboard .kmu7-admin-modal__body .kmu7-check {
  color: var(--kmu7-admin-ink);
  font-size: 0.95em;
  font-weight: 600;
}
.kmu7-admin-dashboard .kmu7-admin-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}
.kmu7-admin-dashboard .kmu7-admin-modal__foot .kmu7-btn {
  width: auto;
  margin: 0;
}
.kmu7-admin-dashboard .kmu7-admin-modal__foot .kmu7-btn--ghost {
  background: #ffffff;
  border: 1px solid var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
  font-weight: 700;
}
.kmu7-admin-dashboard .kmu7-admin-modal__foot .kmu7-btn--ghost:hover {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
}

.kmu7-admin-dashboard .kmu7-admin-modal__panel.kmu7-media-library-panel {
  width: min(80rem, calc(100vw - 2.5rem));
  max-height: min(92vh, 860px);
}
.kmu7-media-library-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.kmu7-media-library-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(24rem, 50vh);
  overflow: auto;
}
.kmu7-media-library-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  max-height: min(34rem, 65vh);
}
.kmu7-media-library-empty {
  grid-column: 1 / -1;
  margin: 0;
}
.kmu7-media-library-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  padding: 0.45rem;
  border: 1px solid var(--kmu7-admin-line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.kmu7-media-library-card:hover,
.kmu7-media-library-card:focus-visible {
  border-color: rgba(242, 101, 34, 0.55);
  background: var(--kmu7-admin-brand-soft, #fff7ed);
  outline: none;
}
.kmu7-media-library-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f1f5f9;
  overflow: hidden;
}
.kmu7-media-library-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kmu7-media-library-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.75rem;
  color: var(--kmu7-admin-ink-muted, #64748b);
}
.kmu7-media-library-card__title {
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--kmu7-admin-ink, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kmu7-media-library-card__course {
  font-size: 0.72rem;
  color: var(--kmu7-admin-ink-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kmu7-media-library-card__size {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--kmu7-admin-brand-deep, #c2410c);
}
.kmu7-media-library-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--kmu7-admin-line, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.kmu7-media-library-item:hover {
  border-color: rgba(242, 101, 34, 0.45);
  background: var(--kmu7-admin-brand-soft, #fff7ed);
}
.kmu7-media-library-item__title {
  font-weight: 600;
  color: var(--kmu7-admin-ink, #0f172a);
}
.kmu7-media-library-item__meta {
  font-size: 0.82rem;
  color: var(--kmu7-admin-ink-muted, #64748b);
}
.kmu7-media-picked-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.kmu7-media-picked-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px dashed rgba(242, 101, 34, 0.35);
  background: #fffaf5;
}
.kmu7-media-picked-item__label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--kmu7-admin-ink, #0f172a);
}
.kmu7-media-picked-item__meta {
  grid-column: 1 / 2;
  font-size: 0.78rem;
  color: var(--kmu7-admin-ink-muted, #64748b);
}
.kmu7-media-picked-item__remove {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  border: none;
  background: transparent;
  color: #b91c1c;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

@media (max-width: 720px) {
  .kmu7-admin-dashboard .kmu7-admin-aff-table .kmu7-admin-aff-col-actions {
    white-space: nowrap;
    max-width: none;
  }
}

.kmu7-admin-cert-report-page .kmu7-admin-cert-report-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.kmu7-admin-cert-report-page .kmu7-admin-cert-report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.kmu7-admin-cert-report-page .kmu7-admin-cert-report-tabs .kmu7-btn.is-active {
  background: var(--kmu7-admin-brand-soft);
  border-color: rgba(242, 101, 34, 0.45);
  color: var(--kmu7-admin-brand-deep);
  font-weight: 700;
}
.kmu7-admin-cert-report-page .kmu7-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}
.kmu7-admin-cert-report-page .kmu7-badge--ok {
  background: #ecfdf5;
  color: #047857;
}
.kmu7-admin-cert-report-page .kmu7-badge--muted {
  background: #f3f4f6;
  color: #6b7280;
}
.kmu7-admin-cert-report-page .kmu7-admin-cert-report-stats {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}
.kmu7-admin-cert-report-page .kmu7-admin-safety-report-stats {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  max-width: none;
}
.kmu7-admin-cert-report-page .kmu7-admin-table-actions {
  width: 8.5rem;
  min-width: 8.5rem;
  max-width: none;
  white-space: nowrap;
}
.kmu7-admin-cert-report-page .kmu7-admin-table-actions__inner {
  flex-wrap: nowrap;
  width: max-content;
}
.kmu7-admin-cert-report-page .kmu7-admin-table-actions__inner .kmu7-admin-iconbtn {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 9px;
}
.kmu7-admin-cert-report-page .kmu7-admin-table-actions__inner .kmu7-inline-form {
  display: inline-flex;
  margin: 0;
}

/* SDG courses report */
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report-filter-row .kmu7-field--grow {
  flex: 1 1 220px;
  min-width: 200px;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report-table td {
  vertical-align: top;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__course-link {
  color: inherit;
  text-decoration: none;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__course-link:hover strong {
  color: var(--kmu7-admin-brand);
  text-decoration: underline;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__sub {
  margin-top: 0.2rem;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__sdg-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 360px;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__sdg-img {
  display: block;
  width: 47px;
  height: 47px;
  object-fit: contain;
  border-radius: 0;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__audience-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__audience-chip {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: rgba(242, 101, 34, 0.1);
  color: var(--kmu7-admin-brand-deep);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__audience-orgs {
  margin-top: 0.1rem;
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__desc {
  max-width: 320px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--kmu7-admin-ink-muted);
}
.kmu7-admin-sdg-report-page .kmu7-admin-sdg-report__cert-count {
  font-size: 1.05rem;
  color: var(--kmu7-admin-brand-deep);
}

/* API management */
.kmu7-admin-api-page .kmu7-admin-api-key-reveal {
  word-break: break-all;
}
.kmu7-admin-api-page .kmu7-admin-api-key-code {
  display: block;
  margin: 0.5rem 0;
  padding: 0.65rem 0.85rem;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
}
.kmu7-admin-api-page .kmu7-admin-api-scope-fieldset {
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
}
.kmu7-admin-api-page .kmu7-admin-api-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.kmu7-admin-api-page .kmu7-admin-api-scope-item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 10px;
  cursor: pointer;
  background: #fff;
}
.kmu7-admin-api-page .kmu7-admin-api-scope-item:has(input:checked) {
  border-color: rgba(29, 78, 216, 0.45);
  background: rgba(29, 78, 216, 0.06);
}
.kmu7-admin-api-page .kmu7-admin-api-scope-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kmu7-admin-api-page .kmu7-admin-api-endpoint-list {
  margin: 0 0 1rem 1.1rem;
  padding: 0;
}
.kmu7-admin-api-page .kmu7-admin-api-endpoint-list li {
  margin-bottom: 0.35rem;
}
.kmu7-admin-api-page .kmu7-admin-api-pageheader__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.kmu7-admin-api-page .kmu7-admin-api-create-btn.kmu7-btn--primary {
  width: auto;
  margin-top: 0;
  background: linear-gradient(135deg, var(--kmu7-admin-brand-2) 0%, var(--kmu7-admin-brand) 55%, var(--kmu7-admin-brand-deep) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(242, 101, 34, 0.38);
}
.kmu7-admin-api-page .kmu7-admin-api-create-btn.kmu7-btn--primary:hover {
  filter: brightness(1.03);
  color: #ffffff;
}
.kmu7-admin-api-page .kmu7-admin-api-create-btn.kmu7-btn--primary i {
  color: #ffffff;
}
.kmu7-admin-api-page .kmu7-admin-api-manual {
  margin-bottom: 1.25rem;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.65rem;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__lead {
  margin: 0 0 1rem;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__block {
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 10px;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: #fafbfc;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__block summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--kmu7-admin-ink);
  list-style-position: outside;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__block[open] summary {
  margin-bottom: 0.65rem;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__block ul,
.kmu7-admin-api-page .kmu7-admin-api-manual__block ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}
.kmu7-admin-api-page .kmu7-admin-api-manual__block p {
  margin: 0.5rem 0 0;
}
.kmu7-admin-api-page .kmu7-admin-api-code {
  margin: 0.65rem 0 0;
  padding: 0.75rem 0.9rem;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.kmu7-admin-api-page .kmu7-admin-api-url {
  word-break: break-all;
}
.kmu7-admin-api-page .kmu7-admin-api-manual-table {
  margin: 0.5rem 0 1rem;
  font-size: 0.88rem;
}
.kmu7-admin-api-page .kmu7-admin-api-steps {
  margin: 0.5rem 0 0;
  padding-left: 1.35rem;
}
.kmu7-admin-api-page .kmu7-admin-api-steps li {
  margin-bottom: 0.35rem;
}
.kmu7-admin-cert-report-filter .kmu7-admin-cert-report-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
}
.kmu7-admin-cert-report-filter .kmu7-admin-cert-report-filter-row:last-child {
  margin-bottom: 0;
}
.kmu7-admin-cert-report-filter .kmu7-admin-cert-report-filter-row.kmu7-admin-toolbar {
  align-items: flex-end;
}

/* ตัวแก้รายละเอียดบทเรียน (แอดมิน) */
.kmu7-admin-dashboard .kmu7-lesson-desc-field .kmu7-quill-wrap {
  background: #fff;
  border-radius: 8px;
  margin-top: 0.35rem;
}
.kmu7-admin-dashboard .kmu7-lesson-desc-field .kmu7-quill-wrap .ql-editor {
  min-height: 140px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.kmu7-admin-dashboard .kmu7-lesson-block {
  border-bottom: 1px dashed var(--kmu7-admin-line, #e5e7eb);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* รายละเอียดบทเรียน (ผู้เรียน) */
.kmu7-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.kmu7-lesson-item {
  padding-top: 0.25rem;
}
.kmu7-lesson-item__title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.35;
}
.kmu7-lesson-video-wrap {
  margin: 0 0 1rem;
  max-width: 100%;
}
.kmu7-lesson-video-wrap--embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}
.kmu7-lesson-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.kmu7-lesson-video {
  width: 100%;
  max-height: 480px;
  border-radius: 8px;
  background: #111;
}
.kmu7-lesson-docs {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}
.kmu7-rich-html {
  font-size: 1rem;
  line-height: 1.65;
  color: inherit;
  word-wrap: break-word;
}
.kmu7-rich-html p {
  margin: 0 0 0.85em;
}
.kmu7-rich-html p:last-child {
  margin-bottom: 0;
}
.kmu7-rich-html h2,
.kmu7-rich-html h3,
.kmu7-rich-html h4 {
  margin: 1.1em 0 0.5em;
  line-height: 1.3;
}
.kmu7-rich-html ul,
.kmu7-rich-html ol {
  margin: 0 0 0.85em;
  padding-left: 1.35em;
}
.kmu7-rich-html img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.5em 0;
}
.kmu7-rich-html a {
  color: var(--kmu7-brand, #f26522);
  text-decoration: underline;
}

/* ===== Learner dashboard UI refresh ===== */
.kmu7-page.kmu7-learner-ui {
  --learner-bg: #eef5ff;
  --learner-surface: rgba(255, 255, 255, 0.92);
  --learner-card: #ffffff;
  --learner-text: #1f2a44;
  --learner-muted: #7d89a6;
  --learner-border: rgba(148, 163, 184, 0.18);
  --learner-shadow: 0 24px 80px rgba(116, 144, 185, 0.16);
  --learner-accent: #ff9f43;
  --learner-accent-2: #ff7a1a;
  --learner-accent-soft: #fff1e2;
  background:
    radial-gradient(circle at top center, rgba(191, 219, 254, 0.8) 0%, rgba(238, 245, 255, 0) 36%),
    linear-gradient(180deg, #eaf3ff 0%, #f6faff 48%, #f9fbff 100%);
  color: var(--learner-text);
}

.kmu7-page.kmu7-learner-ui .kmu7-main {
  padding: 2rem 1rem 3rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-wrap {
  max-width: 1240px;
}

.kmu7-page.kmu7-learner-ui .kmu7-lang {
  position: static;
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid var(--learner-border);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 25px rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.kmu7-page.kmu7-learner-ui .kmu7-lang::before {
  content: none;
  display: none;
}

.kmu7-page.kmu7-learner-ui .kmu7-lang__sep {
  display: none;
}

.kmu7-page.kmu7-learner-ui .kmu7-lang__link {
  color: var(--learner-muted);
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
}

.kmu7-page.kmu7-learner-ui .kmu7-lang__link:hover {
  background: #ffffff;
  color: var(--learner-text);
}

.kmu7-page.kmu7-learner-ui .kmu7-lang__link.is-active {
  background: var(--learner-accent-soft);
  color: #b45309;
}

.kmu7-page.kmu7-learner-ui .kmu7-title {
  font-family: var(--font);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--learner-text);
}

.kmu7-page.kmu7-learner-ui .kmu7-subtitle {
  color: var(--learner-text);
  font-size: 1.2rem;
  font-weight: 700;
}

.kmu7-page.kmu7-learner-ui .kmu7-lead {
  color: var(--learner-muted);
  font-size: 1rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-dashboard-header {
  align-items: center;
  margin-bottom: 1.2rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-portal-tools {
  gap: 0.75rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-card.kmu7-dashboard-surface {
  --text: var(--learner-text);
  --muted: var(--learner-muted);
  background: var(--learner-surface);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 32px;
  box-shadow: var(--learner-shadow);
  padding: 1.4rem;
  color: var(--learner-text);
}

@media (min-width: 768px) {
  .kmu7-page.kmu7-learner-ui .kmu7-card.kmu7-dashboard-surface {
    padding: 1.8rem;
  }
}

.kmu7-page.kmu7-learner-ui .kmu7-btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  min-height: 2.75rem;
  width: auto;
  margin-top: 0;
  padding: 0.75rem 1.1rem;
  border-radius: 14px;
}

.kmu7-page.kmu7-learner-ui .kmu7-btn--primary {
  background: linear-gradient(135deg, var(--learner-accent), var(--learner-accent-2));
  color: #fff;
  box-shadow: 0 14px 26px rgba(255, 159, 67, 0.26);
}

.kmu7-page.kmu7-learner-ui .kmu7-btn--primary:hover {
  background: linear-gradient(135deg, #ffac57, #ff881f);
}

.kmu7-page.kmu7-learner-ui .kmu7-btn--ghost {
  background: #fff;
  color: var(--learner-text);
  border: 1px solid var(--learner-border);
  box-shadow: 0 8px 20px rgba(148, 163, 184, 0.08);
}

.kmu7-page.kmu7-learner-ui .kmu7-btn--ghost:hover {
  background: #f9fbff;
  border-color: rgba(255, 159, 67, 0.28);
}

.kmu7-page.kmu7-learner-ui .kmu7-input,
.kmu7-page.kmu7-learner-ui .kmu7-select,
.kmu7-page.kmu7-learner-ui .kmu7-textarea {
  border: 1px solid var(--learner-border);
  background: #fff;
  color: var(--learner-text);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.kmu7-page.kmu7-learner-ui .kmu7-input::placeholder,
.kmu7-page.kmu7-learner-ui .kmu7-textarea::placeholder {
  color: #a0abc0;
}

.kmu7-page.kmu7-learner-ui .kmu7-input:focus,
.kmu7-page.kmu7-learner-ui .kmu7-select:focus,
.kmu7-page.kmu7-learner-ui .kmu7-textarea:focus {
  outline: 2px solid rgba(255, 159, 67, 0.24);
}

.kmu7-page.kmu7-learner-ui .kmu7-badge {
  background: #eef3ff;
  color: #68728d;
  border: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 0.78rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-badge--muted {
  background: #f6f8fe;
  color: #8189a1;
}

.kmu7-page.kmu7-learner-ui .kmu7-badge--ok {
  background: var(--learner-accent-soft);
  color: #b45309;
}

.kmu7-page.kmu7-learner-ui .kmu7-badge--warn {
  background: #fff4dd;
  color: #c27b13;
}

.kmu7-page.kmu7-learner-ui .kmu7-alert {
  border-radius: 18px;
}

.kmu7-page.kmu7-learner-ui .kmu7-alert--ok {
  background: #fff4e7;
  border: 1px solid rgba(255, 159, 67, 0.22);
  color: #b45309;
}

.kmu7-page.kmu7-learner-ui .kmu7-alert--error {
  background: #fff1f2;
  border: 1px solid rgba(244, 114, 182, 0.18);
  color: #be123c;
}

.kmu7-page.kmu7-learner-ui .kmu7-course-toolbar {
  grid-template-columns: minmax(280px, 1.6fr) minmax(180px, 0.7fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 1.1rem;
  margin: 1rem 0;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(248, 251, 255, 0.92);
}

.kmu7-page.kmu7-learner-ui .kmu7-course-toolbar__field label {
  color: var(--learner-muted);
  font-weight: 600;
}

.kmu7-page.kmu7-learner-ui .kmu7-course-toolbar__actions {
  justify-content: flex-end;
}

.kmu7-page.kmu7-learner-ui .kmu7-course-toolbar__meta {
  color: var(--learner-muted);
  margin-bottom: 1.1rem;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog--dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-bottom: 0;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.9rem;
  min-height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: var(--learner-card);
  box-shadow: 0 12px 24px rgba(148, 163, 184, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 159, 67, 0.32);
  box-shadow: 0 18px 30px rgba(148, 163, 184, 0.16);
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__thumb {
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background: #f4f8ff;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__thumb--empty {
  color: var(--learner-muted);
  font-size: 0.82rem;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__body strong {
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--learner-text);
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__actions {
  align-self: stretch;
  justify-content: flex-start;
  margin-top: auto;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__actions .kmu7-btn {
  flex: 1 1 0;
}

.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-hero {
  margin-bottom: 1.25rem;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--learner-shadow);
}

.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-detail--dashboard {
  display: grid;
  gap: 1.25rem;
}

.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-preview__notice,
.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-preview__section {
  padding: 1.15rem 1.2rem;
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  background: #fafcff;
}

.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-preview__summary {
  color: var(--learner-muted);
  font-size: 1rem;
}

.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-outline__item {
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
}

.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-outline__index {
  background: var(--learner-accent-soft);
  color: #b45309;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-list--dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card--dashboard {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: var(--learner-card);
  box-shadow: 0 4px 14px rgba(148, 163, 184, 0.1);
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card--row .kmu7-history-card__thumb {
  flex: 0 0 132px;
  width: 132px;
  max-width: 132px;
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: center;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__title {
  margin: 0;
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--learner-ink, #1e293b);
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__head .kmu7-badge,
.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__flags .kmu7-badge {
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 0.9rem;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__meta {
  color: var(--learner-muted);
  font-size: 0.984rem;
  margin-bottom: 0;
  gap: 0.35rem 1rem;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__actions .kmu7-btn {
  min-height: 2.55rem;
  padding: 0.357rem 0.8rem;
  font-size: 0.984rem;
  line-height: 1.2;
  white-space: nowrap;
}

.kmu7-page.kmu7-learning-profile-page.kmu7-learner-ui .kmu7-profile-section + .kmu7-profile-section {
  margin-top: 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.kmu7-page.kmu7-learning-profile-page.kmu7-learner-ui .kmu7-info-grid {
  gap: 1rem;
}

.kmu7-page.kmu7-learning-profile-page.kmu7-learner-ui .kmu7-info-grid__item {
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #fafcff;
  box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
}

.kmu7-page.kmu7-learning-profile-page.kmu7-learner-ui .kmu7-info-grid__label {
  color: var(--learner-muted);
}

@media (max-width: 860px) {
  .kmu7-page.kmu7-learner-ui .kmu7-course-toolbar {
    grid-template-columns: 1fr;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-course-toolbar__actions {
    justify-content: stretch;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-course-toolbar__actions .kmu7-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .kmu7-page.kmu7-learner-ui .kmu7-main {
    padding-top: 1.35rem;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-portal-tools,
  .kmu7-page.kmu7-learner-ui .kmu7-course-catalog__actions,
  .kmu7-page.kmu7-learner-ui .kmu7-history-card__actions {
    justify-content: stretch;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-portal-tools .kmu7-btn,
  .kmu7-page.kmu7-learner-ui .kmu7-course-catalog__actions .kmu7-btn,
  .kmu7-page.kmu7-learner-ui .kmu7-history-card__actions .kmu7-btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-card.kmu7-dashboard-surface {
    border-radius: 24px;
    padding: 1.1rem;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-title {
    font-size: 1.7rem;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-lang {
    display: flex;
    margin-left: 0;
  }
}

/* ===== Learner dashboard UI refresh - mockup match pass ===== */
.kmu7-page.kmu7-learner-ui .kmu7-learner-shell {
  padding: 1.1rem;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(148, 163, 184, 0.15);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.15rem 0.2rem 1rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-topbar__search {
  flex: 1 1 auto;
  max-width: 430px;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-topbar__search-input.kmu7-input {
  min-height: 2.85rem;
  border-radius: 12px;
  padding-left: 2.85rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.96));
  background-image:
    radial-gradient(circle, rgba(148, 163, 184, 0.65) 0 38%, transparent 40%),
    linear-gradient(rgba(148, 163, 184, 0.65), rgba(148, 163, 184, 0.65)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.96));
  background-repeat: no-repeat;
  background-size: 0.7rem 0.7rem, 0.42rem 2px, auto;
  background-position: 1rem calc(50% - 2px), 1.55rem calc(50% + 0.42rem), 0 0;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-topbar__lang.kmu7-lang {
  margin: 0;
  padding: 0.2rem;
  background: rgba(246, 248, 254, 0.88);
  box-shadow: none;
  border-color: rgba(226, 232, 240, 0.96);
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-userchip {
  min-width: 138px;
  padding: 0.5rem 0.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
  line-height: 1.2;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-userchip strong {
  display: block;
  color: var(--learner-text);
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-userchip__label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--learner-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.kmu7-page.kmu7-learner-ui .kmu7-card.kmu7-dashboard-surface {
  border-radius: 28px;
  border-color: rgba(255, 255, 255, 0.96);
  padding: 1.5rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-sectionhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-sectionhead__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kmu7-page.kmu7-learner-ui .kmu7-learner-note {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: #f6f9ff;
  border: 1px solid rgba(226, 232, 240, 0.92);
  color: var(--learner-muted);
  font-size: 0.92rem;
}

.kmu7-page.kmu7-learner-ui .kmu7-course-toolbar.kmu7-learner-toolbar {
  grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.62fr) minmax(160px, 0.62fr) auto;
  border-radius: 18px;
  padding: 1rem;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog--dashboard {
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 1.35rem;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card {
  padding: 0.95rem;
  border-radius: 20px;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__thumb {
  aspect-ratio: 1.45 / 1;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #f3f0ff;
  color: #7c3aed;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #9ca3af;
  font-size: 0.82rem;
  font-weight: 600;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__rating::before {
  content: "*";
  color: var(--learner-accent);
  font-size: 0.95rem;
  line-height: 1;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__summary {
  color: var(--learner-text);
  font-size: 0.92rem;
  line-height: 1.45;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__foot {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: auto;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__meta {
  color: var(--learner-muted);
  font-size: 0.82rem;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__actions {
  display: flex;
  gap: 0.55rem;
}

.kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__actions .kmu7-btn {
  flex: 1 1 0;
  min-width: 0;
}

.kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-detail--dashboard,
.kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-list--dashboard,
.kmu7-page.kmu7-learning-profile-page.kmu7-learner-ui .kmu7-info-grid {
  margin-top: 0.25rem;
}

@media (max-width: 980px) {
  .kmu7-page.kmu7-learner-ui .kmu7-learner-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-learner-topbar__search {
    max-width: none;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-learner-topbar__actions {
    justify-content: flex-start;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-course-toolbar.kmu7-learner-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .kmu7-page.kmu7-learner-ui .kmu7-course-toolbar.kmu7-learner-toolbar {
    grid-template-columns: 1fr;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-learner-sectionhead {
    flex-direction: column;
  }

  .kmu7-page.kmu7-learner-ui .kmu7-learner-userchip {
    width: 100%;
  }

  .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__actions {
    flex-direction: column;
  }
}

/* ===== Standalone learner portal shell ===== */
body.kmu7-portal-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #dbeafe 0%, #edf4ff 16%, #f6f9ff 48%, #f8fbff 100%);
  color: #1f2937;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui {
  min-height: 100vh;
  padding: 30px 22px;
  background: transparent;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 26px 90px rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.15rem 1rem;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--learner-text);
  text-decoration: none;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-brand__logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.16);
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-brand__text strong {
  font-size: 1rem;
  line-height: 1.2;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-brand__text span {
  color: var(--learner-muted);
  font-size: 0.8rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav {
  display: grid;
  gap: 0.35rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  color: #667085;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav__link:hover {
  background: #f7f9ff;
  color: var(--learner-text);
  transform: translateX(2px);
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav__link.is-active {
  background: #f2efff;
  color: #5b43d6;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.4;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav__link.is-active .kmu7-portal-nav__dot {
  opacity: 1;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-main {
  min-width: 0;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar__search {
  flex: 1 1 auto;
  max-width: 370px;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar__search-input.kmu7-input {
  min-height: 2.95rem;
  padding-left: 2.85rem;
  border-radius: 14px;
  background:
    radial-gradient(circle, rgba(148, 163, 184, 0.64) 0 38%, transparent 40%) 1rem calc(50% - 2px) / 0.72rem 0.72rem no-repeat,
    linear-gradient(rgba(148, 163, 184, 0.64), rgba(148, 163, 184, 0.64)) 1.56rem calc(50% + 0.4rem) / 0.45rem 2px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar__lang.kmu7-lang {
  margin: 0;
  padding: 0.22rem;
  background: rgba(246, 248, 254, 0.96);
  border-color: rgba(226, 232, 240, 0.98);
  box-shadow: none;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-userchip {
  min-width: 148px;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08);
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-userchip__label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--learner-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-userchip strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--learner-text);
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-content {
  min-width: 0;
}

body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-panel.kmu7-card.kmu7-dashboard-surface {
  padding: 1.5rem;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
}

body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-toolbar.kmu7-learner-toolbar {
  grid-template-columns: minmax(250px, 1.7fr) minmax(150px, 0.72fr) minmax(150px, 0.72fr) auto;
}

body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog--dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card {
  border-radius: 18px;
  padding: 0.9rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__thumb {
  aspect-ratio: 1.3 / 1;
  border-radius: 14px;
}

body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog__body strong {
  font-size: 0.98rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__summary {
  min-height: 2.7em;
  color: #374151;
}

body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-card__meta {
  display: block;
}

body.kmu7-portal-body .kmu7-page.kmu7-course-preview-page.kmu7-learner-ui .kmu7-course-hero {
  border-radius: 28px;
}

body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card--dashboard {
  border-radius: 14px;
}

@media (max-width: 1180px) {
  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-layout {
    grid-template-columns: 1fr;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-sidebar {
    padding: 1rem;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog--dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui {
    padding: 18px 12px;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar__search {
    max-width: none;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-topbar__actions {
    justify-content: flex-start;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-catalog-page.kmu7-learner-ui .kmu7-course-catalog--dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card--dashboard {
    flex-direction: column;
    gap: 0.75rem;
  }

  .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card--row .kmu7-history-card__thumb {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 7;
  }

  .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__actions .kmu7-btn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 640px) {
  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-layout {
    padding: 12px;
    border-radius: 24px;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-panel.kmu7-card.kmu7-dashboard-surface {
    padding: 1rem;
    border-radius: 20px;
  }

  body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-portal-nav {
    grid-template-columns: 1fr;
  }
}

/* ===== Academos mockup layout ===== */
html.kmu7-portal-html {
  font-size: 112.5%;
}

body.kmu7-portal-body {
  margin: 0;
  min-height: 100vh;
  background: #f4f5f7;
  color: #111827;
  font-family: var(--font, "Segoe UI", system-ui, sans-serif);
}

body.kmu7-portal-body .kmu7-page.kmu7-academos-ui {
  min-height: 100vh;
  padding: 0;
  background: #f4f5f7;
}

body.kmu7-portal-body .kmu7-academos-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

body.kmu7-portal-body .kmu7-academos-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 212px;
  flex: 0 0 212px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100vh;
  max-height: 100vh;
  padding: 1.35rem 1rem 1rem;
  background: #fff;
  border-right: 1px solid #eceef2;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.kmu7-portal-body .kmu7-academos-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.15rem;
  text-decoration: none;
  color: #111827;
}

body.kmu7-portal-body .kmu7-academos-brand__mark {
  width: 38.4px;
  height: 38.4px;
  flex: 0 0 38.4px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f0ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.kmu7-portal-body .kmu7-academos-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.kmu7-portal-body .kmu7-academos-brand__name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

body.kmu7-portal-body .kmu7-academos-navgroup {
  margin-top: 0.664rem;
}

body.kmu7-portal-body .kmu7-academos-navgroup__label {
  display: block;
  margin: 0 0 0.325rem 0.75rem;
  color: #98a2b3;
  font-size: 0.897rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

body.kmu7-portal-body .kmu7-academos-nav {
  display: grid;
  gap: 0.1rem;
}

body.kmu7-portal-body .kmu7-academos-nav__link,
body.kmu7-portal-body .kmu7-academos-help {
  display: flex;
  align-items: center;
  gap: 0.43125rem;
  min-height: 2.3rem;
  padding: 0.28rem 0.55rem;
  border-radius: 12px;
  color: #667085;
  text-decoration: none;
  font-size: 1.035rem;
  font-weight: 600;
  line-height: 1.2;
}

body.kmu7-portal-body .kmu7-academos-nav__link.kmu7-academos-logout {
  margin-top: 0.075rem;
}

body.kmu7-portal-body .kmu7-academos-nav__link:hover,
body.kmu7-portal-body .kmu7-academos-help:hover {
  background: #f8f9fc;
  color: #344054;
}

body.kmu7-portal-body .kmu7-academos-nav__link.is-active {
  background: #f3f0ff;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-academos-nav__icon {
  width: 21.85px;
  height: 21.85px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21.85px;
}

body.kmu7-portal-body .kmu7-academos-nav__icon svg {
  width: 21.85px;
  height: 21.85px;
}

body.kmu7-portal-body .kmu7-academos-sidebar__footer {
  margin-top: auto;
  display: grid;
  gap: 0.375rem;
}

body.kmu7-portal-body .kmu7-academos-lang__links {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

body.kmu7-portal-body .kmu7-academos-lang__sep {
  color: #d0d5dd;
  font-size: 0.88rem;
  line-height: 1;
}

body.kmu7-portal-body .kmu7-academos-lang__link {
  color: #667085;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
}

body.kmu7-portal-body .kmu7-academos-lang__link:hover {
  color: #344054;
}

body.kmu7-portal-body .kmu7-academos-lang__link.is-active {
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-academos-lang--topbar {
  display: inline-flex;
  align-items: center;
  min-height: 2.55rem;
  padding: 0 0.85rem;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: transparent;
}

body.kmu7-portal-body .kmu7-academos-lang--topbar .kmu7-academos-lang__link {
  font-size: 1.058rem;
}

body.kmu7-portal-body .kmu7-academos-lang--topbar .kmu7-academos-lang__sep {
  font-size: 1.012rem;
}

body.kmu7-portal-body .kmu7-academos-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.kmu7-portal-body .kmu7-academos-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.75rem;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(236, 238, 242, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

body.kmu7-portal-body .kmu7-academos-topbar__start {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

body.kmu7-portal-body .kmu7-academos-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 2.45rem;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  background: #fff;
  color: #344054;
  cursor: pointer;
}

body.kmu7-portal-body .kmu7-academos-navtoggle__icon {
  width: 1.2rem;
  height: 1.2rem;
}

body.kmu7-portal-body .kmu7-academos-navtoggle:hover {
  background: #f8f9fc;
  border-color: #c7cdd6;
}

body.kmu7-portal-body .kmu7-academos-navbackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16, 24, 40, 0.45);
  border: 0;
}

body.kmu7-portal-body.kmu7-academos-nav-open {
  overflow: hidden;
}

body.kmu7-portal-body.kmu7-academos-nav-open .kmu7-academos-navbackdrop {
  display: block;
}

body.kmu7-portal-body.kmu7-academos-nav-open .kmu7-academos-topbar {
  z-index: 115;
}

body.kmu7-portal-body .kmu7-academos-topbar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: min(100%, 52rem);
  text-decoration: none;
  color: #111827;
}

body.kmu7-portal-body .kmu7-academos-topbar__brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin-top: 0.05rem;
  border-radius: 11px;
  overflow: hidden;
  background: #f3f0ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.kmu7-portal-body .kmu7-academos-topbar__brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.kmu7-portal-body .kmu7-academos-topbar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.084rem;
  min-width: 0;
}

body.kmu7-portal-body .kmu7-academos-topbar__brand-mode {
  font-size: 1.279rem;
  font-weight: 800;
  line-height: 0.875;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-academos-topbar__brand-org {
  font-size: 1.217rem;
  font-weight: 700;
  line-height: 0.945;
  color: #111827;
}

body.kmu7-portal-body .kmu7-academos-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 0 0 auto;
}

body.kmu7-portal-body .kmu7-btn--upgrade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb347, #ff8c42);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(255, 140, 66, 0.28);
}

body.kmu7-portal-body .kmu7-btn--purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0 1.1rem;
  border-radius: 12px;
  background: #6941f5;
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(105, 65, 245, 0.22);
}

body.kmu7-portal-body .kmu7-academos-iconbtn {
  width: 2.55rem;
  height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #eceef2;
  background: #fff;
  color: #667085;
  text-decoration: none;
}

body.kmu7-portal-body .kmu7-academos-iconbtn svg {
  width: 18px;
  height: 18px;
}

body.kmu7-portal-body .kmu7-academos-profile {
  display: inline-flex;
  align-items: center;
  min-height: 2.55rem;
  padding: 0;
  border: none;
  background: transparent;
}

body.kmu7-portal-body .kmu7-academos-profile__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.2;
  white-space: nowrap;
}

body.kmu7-portal-body .kmu7-academos-profile__name {
  font-size: 1.058rem;
  font-weight: 700;
  color: #111827;
}

body.kmu7-portal-body .kmu7-academos-profile__sep {
  color: #d0d5dd;
  font-size: 1.058rem;
  font-weight: 400;
  line-height: 1;
}

body.kmu7-portal-body .kmu7-academos-profile__role {
  font-size: 1.058rem;
  font-weight: 400;
  color: #667085;
}

body.kmu7-portal-body .kmu7-academos-content {
  flex: 1 1 auto;
  padding: 1.5rem 1.75rem 2rem;
}

body.kmu7-portal-body .kmu7-academos-pagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

body.kmu7-portal-body .kmu7-academos-pagehead__title {
  margin: 0;
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111827;
}

body.kmu7-portal-body .kmu7-academos-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(170px, 0.55fr) minmax(170px, 0.55fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

body.kmu7-portal-body .kmu7-academos-filters__search {
  position: relative;
  display: block;
}

body.kmu7-portal-body .kmu7-academos-filters__search .kmu7-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 1rem 0 2.7rem;
  border: 1px solid #eceef2;
  border-radius: 12px;
  background: #fff;
  font-size: 0.98rem;
}

body.kmu7-portal-body .kmu7-academos-filters__icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #98a2b3;
}

body.kmu7-portal-body .kmu7-academos-filters__icon svg {
  width: 18px;
  height: 18px;
}

body.kmu7-portal-body .kmu7-academos-filters__select.kmu7-select {
  min-height: 2.75rem;
  padding: 0 2.5rem 0 1rem;
  border: 1px solid #eceef2;
  border-radius: 12px;
  background-color: #fff;
  color: #344054;
  font-size: 0.98rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%2398a2b3' d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem 1.1rem;
}

body.kmu7-portal-body .kmu7-academos-pagehead__lead {
  margin: 0.35rem 0 0;
  color: #667085;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 52rem;
}

body.kmu7-portal-body .kmu7-academos-note,
body.kmu7-portal-body .kmu7-academos-empty {
  margin: 0 0 1rem;
  color: #667085;
  font-size: 0.98rem;
}

body.kmu7-portal-body .kmu7-academos-empty-block {
  padding: 1.25rem 1rem;
  border: 1px dashed #d0d5dd;
  border-radius: 12px;
  background: #fafafa;
}

body.kmu7-portal-body .kmu7-academos-empty-hint {
  margin: 0 0 0.75rem;
  color: #667085;
  font-size: 0.92rem;
  line-height: 1.45;
}

body.kmu7-portal-body .kmu7-academos-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.kmu7-portal-body .kmu7-academos-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eceef2;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.kmu7-portal-body .kmu7-academos-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(16, 24, 40, 0.08);
}

body.kmu7-portal-body .kmu7-academos-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1.35 / 1;
  background: #eef2ff;
  overflow: hidden;
}

body.kmu7-portal-body .kmu7-academos-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.kmu7-portal-body .kmu7-academos-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.kmu7-portal-body .kmu7-academos-card__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  color: #98a2b3;
  font-size: 0.82rem;
  text-align: center;
}

body.kmu7-portal-body .kmu7-academos-card__media-badges {
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.65rem;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.45rem;
  pointer-events: none;
}

body.kmu7-portal-body .kmu7-academos-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 1rem 1rem;
}

body.kmu7-portal-body .kmu7-academos-card__tag {
  display: inline-flex;
  align-items: center;
  max-width: 72%;
  min-height: 1.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(243, 240, 255, 0.96);
  color: #6941f5;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
}

body.kmu7-portal-body .kmu7-academos-card__countdown {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #d97706;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.14);
}

body.kmu7-portal-body .kmu7-academos-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #98a2b3;
  font-size: 0.82rem;
  font-weight: 700;
}

body.kmu7-portal-body .kmu7-academos-card__rating::before {
  content: "★";
  color: #fbbf24;
}

body.kmu7-portal-body .kmu7-academos-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.2em;
  font-size: 0.98rem;
  line-height: 1.4;
  color: #111827;
}

body.kmu7-portal-body .kmu7-academos-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
}

body.kmu7-portal-body .kmu7-academos-card__students {
  color: #98a2b3;
  font-size: 0.82rem;
}

body.kmu7-portal-body .kmu7-academos-card__price {
  color: #2563eb;
  font-size: 0.92rem;
  font-weight: 800;
}

body.kmu7-portal-body .kmu7-academos-panel {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
}

body.kmu7-portal-body .kmu7-academos-detail-hero {
  margin: -1.25rem -1.25rem 1rem;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

body.kmu7-portal-body .kmu7-academos-detail-hero img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

@media (max-width: 1500px) {
  body.kmu7-portal-body .kmu7-academos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  body.kmu7-portal-body .kmu7-academos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  body.kmu7-portal-body .kmu7-academos-layout {
    flex-direction: column;
  }

  body.kmu7-portal-body .kmu7-academos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.kmu7-portal-body .kmu7-academos-navtoggle {
    display: inline-flex;
  }

  body.kmu7-portal-body {
    --kmu7-academos-topbar-h: 3.2rem;
  }

  body.kmu7-portal-body .kmu7-academos-sidebar {
    position: fixed;
    top: var(--kmu7-academos-topbar-h);
    left: 0;
    z-index: 110;
    width: min(292px, 86vw);
    flex: 0 0 auto;
    height: calc(100dvh - var(--kmu7-academos-topbar-h));
    max-height: calc(100dvh - var(--kmu7-academos-topbar-h));
    overflow-y: auto;
    border-right: 1px solid #eceef2;
    border-bottom: 0;
    box-shadow: 0 16px 48px rgba(16, 24, 40, 0.2);
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    visibility: hidden;
  }

  body.kmu7-portal-body.kmu7-academos-nav-open .kmu7-academos-sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  body.kmu7-portal-body .kmu7-academos-nav {
    grid-template-columns: 1fr;
  }

  body.kmu7-portal-body .kmu7-academos-filters {
    grid-template-columns: 1fr;
  }

  body.kmu7-portal-body .kmu7-academos-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--kmu7-academos-topbar-h);
    padding: 0.45rem 1rem;
  }

  body.kmu7-portal-body .kmu7-academos-topbar__start {
    flex: 0 0 auto;
  }

  body.kmu7-portal-body .kmu7-academos-topbar__brand,
  body.kmu7-portal-body .kmu7-academos-profile {
    display: none;
  }

  body.kmu7-portal-body .kmu7-academos-topbar__actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  body.kmu7-portal-body .kmu7-academos-navtoggle {
    margin-top: 0;
  }

  body.kmu7-portal-body .kmu7-academos-lang--topbar {
    min-height: 2.35rem;
    padding: 0 0.7rem;
  }
}

@media (max-width: 720px) {
  body.kmu7-portal-body .kmu7-academos-topbar,
  body.kmu7-portal-body .kmu7-academos-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.kmu7-portal-body .kmu7-academos-grid {
    grid-template-columns: 1fr;
  }

  body.kmu7-portal-body .kmu7-academos-pagehead {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Learner profile — academos portal (+20% typography) */
body.kmu7-portal-body .kmu7-learner-profile {
  --lp-scale: 1.2;
}

body.kmu7-portal-body .kmu7-learner-profile__lead {
  margin: 0 0 1.25rem;
  color: #667085;
  font-size: calc(0.95rem * var(--lp-scale));
}

body.kmu7-portal-body .kmu7-learner-profile__empty {
  display: grid;
  gap: 1rem;
  padding: 0.5rem 0;
}

body.kmu7-portal-body .kmu7-learner-profile__form {
  display: grid;
  gap: 1.1rem;
}

body.kmu7-portal-body .kmu7-learner-profile__card {
  padding: 1.15rem 1.2rem;
  border: 1px solid #eceef2;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfcfd 0%, #fff 100%);
}

body.kmu7-portal-body .kmu7-learner-profile__card + .kmu7-learner-profile__card {
  margin-top: 0;
}

body.kmu7-portal-body .kmu7-learner-profile__card-title {
  margin: 0 0 1rem;
  font-size: calc(1rem * var(--lp-scale));
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}

body.kmu7-portal-body .kmu7-learner-profile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

body.kmu7-portal-body .kmu7-learner-profile__field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

body.kmu7-portal-body .kmu7-learner-profile__field--full {
  grid-column: 1 / -1;
}

body.kmu7-portal-body .kmu7-learner-profile__field--hidden {
  display: none;
}

body.kmu7-portal-body .kmu7-learner-profile__field label,
body.kmu7-portal-body .kmu7-learner-profile__label {
  font-size: calc(0.78rem * var(--lp-scale));
  font-weight: 700;
  color: #667085;
  letter-spacing: 0.02em;
}

body.kmu7-portal-body .kmu7-learner-profile__input.kmu7-input,
body.kmu7-portal-body .kmu7-learner-profile__input.kmu7-select {
  min-height: calc(2.65rem * var(--lp-scale));
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-size: calc(0.95rem * var(--lp-scale));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.kmu7-portal-body .kmu7-learner-profile__input.kmu7-input:focus,
body.kmu7-portal-body .kmu7-learner-profile__input.kmu7-select:focus {
  outline: 2px solid rgba(105, 65, 245, 0.22);
  border-color: #c7b9ff;
}

body.kmu7-portal-body .kmu7-learner-profile__input--readonly {
  background: #f8f9fc;
  color: #667085;
}

body.kmu7-portal-body .kmu7-learner-profile__pill {
  display: inline-flex;
  align-items: center;
  min-height: calc(2.2rem * var(--lp-scale));
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #f3f0ff;
  color: #6941f5;
  font-size: calc(0.88rem * var(--lp-scale));
  font-weight: 700;
}

body.kmu7-portal-body .kmu7-learner-profile__name-note {
  margin: 0.75rem 0 0;
  font-size: calc(0.84rem * var(--lp-scale));
  line-height: 1.5;
  color: #667085;
}

body.kmu7-portal-body .kmu7-learner-profile__name-note--locked {
  color: #b54708;
  font-weight: 600;
}

body.kmu7-portal-body .kmu7-learner-profile__contact-link {
  color: #175cd3;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.kmu7-portal-body .kmu7-learner-profile__contact-link:hover {
  color: #1849a9;
}

body.kmu7-portal-body .kmu7-learner-profile__modal-panel--warn {
  border-color: #fedf89;
  box-shadow: 0 24px 48px rgba(181, 71, 8, 0.12);
}

body.kmu7-portal-body .kmu7-learner-profile__inline-action {
  margin: 1rem 0 0;
}

body.kmu7-portal-body .kmu7-learner-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding-top: 0.35rem;
}

body.kmu7-portal-body .kmu7-learner-profile__actions .kmu7-btn,
body.kmu7-portal-body .kmu7-learner-profile__inline-action .kmu7-btn {
  font-size: calc(0.92rem * var(--lp-scale));
}

body.kmu7-portal-body .kmu7-btn--danger-portal {
  border: 1px solid #fda4af;
  background: #fff1f2;
  color: #e11d48;
  font-weight: 700;
}

body.kmu7-portal-body .kmu7-btn--danger-portal:hover {
  background: #ffe4e6;
  border-color: #fb7185;
  color: #be123c;
}

body.kmu7-portal-body .kmu7-learner-profile .kmu7-alert {
  margin-bottom: 1rem;
  border-radius: 12px;
  font-size: calc(0.92rem * var(--lp-scale));
}

body.kmu7-portal-body .kmu7-learner-profile .kmu7-alert--ok {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  color: #067647;
}

body.kmu7-portal-body .kmu7-learner-profile .kmu7-alert--error {
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
}

body.kmu7-portal-body .kmu7-learner-profile__modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
}

body.kmu7-portal-body .kmu7-learner-profile__modal[hidden] {
  display: none;
}

body.kmu7-portal-body .kmu7-learner-profile__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
}

body.kmu7-portal-body .kmu7-learner-profile__modal-panel {
  position: relative;
  width: min(100%, 420px);
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eceef2;
  box-shadow: 0 24px 48px rgba(16, 24, 40, 0.18);
}

body.kmu7-portal-body .kmu7-learner-profile__modal-title {
  margin: 0 0 0.65rem;
  font-size: calc(1.05rem * var(--lp-scale));
  font-weight: 800;
  color: #111827;
}

body.kmu7-portal-body .kmu7-learner-profile__modal-text {
  margin: 0 0 1.15rem;
  color: #667085;
  font-size: calc(0.92rem * var(--lp-scale));
  line-height: 1.55;
}

body.kmu7-portal-body .kmu7-learner-profile__modal-actions .kmu7-btn {
  font-size: calc(0.92rem * var(--lp-scale));
}

body.kmu7-portal-body .kmu7-learner-profile__modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
}

body.kmu7-learner-profile-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  body.kmu7-portal-body .kmu7-learner-profile__grid {
    grid-template-columns: 1fr;
  }

  body.kmu7-portal-body .kmu7-learner-profile__actions .kmu7-btn {
    flex: 1 1 100%;
  }
}

body.kmu7-course-save-active {
  overflow: hidden;
}

.kmu7-admin-dashboard .kmu7-course-save-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
}

.kmu7-admin-dashboard .kmu7-course-save-overlay[hidden] {
  display: none;
}

.kmu7-admin-dashboard .kmu7-course-save-overlay__panel {
  width: min(100%, 28rem);
  padding: 1.35rem 1.5rem 1.25rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

.kmu7-admin-dashboard .kmu7-course-save-overlay__title {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #101828;
}

.kmu7-admin-dashboard .kmu7-course-save-overlay__phase {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #344054;
}

.kmu7-admin-dashboard .kmu7-course-save-overlay__current {
  margin: 0.55rem 0 0;
  min-height: 2.6em;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #475467;
  word-break: break-word;
}

.kmu7-admin-dashboard .kmu7-course-save-progress {
  height: 10px;
  margin: 1rem 0 0.45rem;
  border-radius: 999px;
  background: #eaecf0;
  overflow: hidden;
}

.kmu7-admin-dashboard .kmu7-course-save-progress__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  transition: width 0.18s ease;
}

.kmu7-admin-dashboard .kmu7-course-save-progress--indeterminate .kmu7-course-save-progress__bar {
  width: 38%;
  animation: kmu7-course-save-indeterminate 1.15s ease-in-out infinite;
}

@keyframes kmu7-course-save-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.kmu7-admin-dashboard .kmu7-course-save-overlay__percent {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1d4ed8;
}

.kmu7-admin-dashboard .kmu7-course-save-overlay__summary {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  color: #667085;
}

.kmu7-admin-dashboard .kmu7-course-save-overlay__hint {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
}

/* จัดการไฟล์คอร์ส (แอดมิน) */
.kmu7-admin-dashboard .kmu7-admin-course-files-page {
  --kmu7-cf-scale: 1.25;
  width: 100%;
  min-width: 0;
  font-size: 125%;
}

.kmu7-admin-dashboard .kmu7-admin-course-files-page .kmu7-admin-pageheader__title {
  font-size: calc(1.6rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-admin-course-files-page .kmu7-admin-pageheader__meta,
.kmu7-admin-dashboard .kmu7-admin-course-files-page .kmu7-admin-pageheader__lead {
  font-size: calc(0.95rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-admin-course-files-page .kmu7-input,
.kmu7-admin-dashboard .kmu7-admin-course-files-page .kmu7-select,
.kmu7-admin-dashboard .kmu7-admin-course-files-page .kmu7-btn {
  font-size: calc(1rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-admin-course-files-page .kmu7-alert {
  font-size: calc(0.95rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.kmu7-admin-dashboard .kmu7-cf-stat {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--kmu7-admin-card);
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 2px rgba(42, 47, 58, 0.04);
}

.kmu7-admin-dashboard .kmu7-cf-stat--primary {
  border-color: rgba(242, 101, 34, 0.22);
  background: linear-gradient(135deg, #fffdfb 0%, #fff7f2 100%);
}

.kmu7-admin-dashboard .kmu7-cf-stat__icon {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
  font-size: calc(1rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-stat--video .kmu7-cf-stat__icon {
  background: #fff0e8;
  color: #c94a12;
}

.kmu7-admin-dashboard .kmu7-cf-stat--document .kmu7-cf-stat__icon {
  background: #fff4eb;
  color: #b45309;
}

.kmu7-admin-dashboard .kmu7-cf-stat--image .kmu7-cf-stat__icon {
  background: #fff8f3;
  color: #d6541b;
}

.kmu7-admin-dashboard .kmu7-cf-stat--pending .kmu7-cf-stat__icon {
  background: #fef2f2;
  color: #b91c1c;
}

.kmu7-admin-dashboard .kmu7-cf-stat__body {
  min-width: 0;
}

.kmu7-admin-dashboard .kmu7-cf-stat__label {
  display: block;
  font-size: calc(0.78rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
  margin-bottom: 0.12rem;
}

.kmu7-admin-dashboard .kmu7-cf-stat__value {
  display: block;
  font-size: calc(1.2rem * var(--kmu7-cf-scale));
  line-height: 1.2;
  color: var(--kmu7-admin-ink);
}

.kmu7-admin-dashboard .kmu7-cf-stat__value small {
  font-size: calc(0.72rem * var(--kmu7-cf-scale));
  font-weight: 600;
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-stat__sub {
  display: block;
  font-size: calc(0.74rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
  margin-top: 0.12rem;
}

.kmu7-admin-dashboard .kmu7-cf-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.kmu7-admin-dashboard .kmu7-cf-sidebar {
  position: sticky;
  top: 1rem;
  padding: 1rem;
}

.kmu7-admin-dashboard .kmu7-cf-sidebar__title {
  margin: 0 0 0.85rem;
  font-size: calc(1rem * var(--kmu7-cf-scale));
  font-weight: 700;
  color: var(--kmu7-admin-ink);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.kmu7-admin-dashboard .kmu7-cf-sidebar__title i {
  color: var(--kmu7-admin-brand);
}

.kmu7-admin-dashboard .kmu7-cf-filters .kmu7-field {
  margin-bottom: 0.75rem;
}

.kmu7-admin-dashboard .kmu7-cf-filters .kmu7-field label {
  color: var(--kmu7-admin-ink-muted);
  font-weight: 600;
  font-size: calc(0.82rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-input,
.kmu7-admin-dashboard .kmu7-cf-filters .kmu7-input,
.kmu7-admin-dashboard .kmu7-cf-filters .kmu7-select {
  background: #fafafa;
  border-color: var(--kmu7-admin-line);
  color: var(--kmu7-admin-ink);
  width: 100%;
}

.kmu7-admin-dashboard .kmu7-cf-search-wrap {
  position: relative;
}

.kmu7-admin-dashboard .kmu7-cf-search-wrap__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kmu7-admin-ink-muted);
  font-size: calc(0.85rem * var(--kmu7-cf-scale));
  pointer-events: none;
}

.kmu7-admin-dashboard .kmu7-cf-search-wrap .kmu7-input {
  padding-left: 2.15rem;
}

.kmu7-admin-dashboard .kmu7-cf-filter-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.kmu7-admin-dashboard .kmu7-cf-filter-submit {
  width: 100%;
  justify-content: center;
}

.kmu7-admin-dashboard .kmu7-cf-content {
  padding: 1rem;
  min-width: 0;
}

.kmu7-admin-dashboard .kmu7-cf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--kmu7-admin-line);
}

.kmu7-admin-dashboard .kmu7-cf-toolbar__count {
  margin: 0;
  font-size: calc(0.9rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-toolbar__count strong {
  color: var(--kmu7-admin-ink);
}

.kmu7-admin-dashboard .kmu7-cf-toolbar__page {
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-view-toggle {
  display: inline-flex;
  padding: 0.2rem;
  gap: 0.2rem;
  background: #fafafa;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 12px;
}

.kmu7-admin-dashboard .kmu7-cf-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--kmu7-admin-ink-muted);
  font: inherit;
  font-size: calc(0.82rem * var(--kmu7-cf-scale));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.kmu7-admin-dashboard .kmu7-cf-view-btn:hover {
  color: var(--kmu7-admin-brand-deep);
  background: #fff;
}

.kmu7-admin-dashboard .kmu7-cf-view-btn.is-active {
  background: #fff;
  color: var(--kmu7-admin-brand-deep);
  box-shadow: 0 1px 4px rgba(42, 47, 58, 0.08);
}

.kmu7-admin-dashboard .kmu7-cf-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-empty i {
  font-size: calc(2.5rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-brand);
  opacity: 0.45;
  margin-bottom: 0.65rem;
}

.kmu7-admin-dashboard .kmu7-cf-empty p {
  margin: 0;
}

.kmu7-admin-dashboard .kmu7-cf-badge {
  display: inline-flex;
  align-items: center;
  font-size: calc(0.72rem * var(--kmu7-cf-scale));
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--kmu7-admin-ink-muted);
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-cf-badge--video {
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
}

.kmu7-admin-dashboard .kmu7-cf-badge--image {
  background: #fff4eb;
  color: #c2410c;
}

.kmu7-admin-dashboard .kmu7-cf-badge--document {
  background: #fff7ed;
  color: #9a3412;
}

.kmu7-admin-dashboard .kmu7-cf-badge--pending {
  background: #fef2f2;
  color: #b91c1c;
}

.kmu7-admin-dashboard .kmu7-cf-file-link {
  font-weight: 700;
  font-size: calc(0.95rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-brand-deep);
  text-decoration: none;
  word-break: break-word;
}

.kmu7-admin-dashboard .kmu7-cf-file-link:hover {
  text-decoration: underline;
  color: var(--kmu7-admin-brand);
}

.kmu7-admin-dashboard .kmu7-cf-file-link--plain {
  color: var(--kmu7-admin-ink);
}

.kmu7-admin-dashboard .kmu7-cf-path {
  display: block;
  margin-top: 0.2rem;
  font-size: calc(0.7rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
  word-break: break-all;
}

.kmu7-admin-dashboard .kmu7-cf-muted {
  color: var(--kmu7-admin-ink-muted);
  font-size: calc(0.88rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-ref {
  font-size: calc(0.78rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-ref--none {
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-ref--count {
  color: var(--kmu7-admin-brand-deep);
  font-weight: 600;
}

.kmu7-admin-dashboard .kmu7-cf-ref-list {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  font-size: calc(0.74rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-ref-list--compact {
  max-height: 3.2em;
  overflow: hidden;
}

.kmu7-admin-dashboard .kmu7-cf-ref-list--table {
  max-height: none;
  overflow: visible;
}

.kmu7-admin-dashboard .kmu7-cf-thumb {
  position: relative;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff8f4 0%, #fff1e8 100%);
  border: 1px solid rgba(242, 101, 34, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kmu7-admin-brand);
}

.kmu7-admin-dashboard .kmu7-cf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kmu7-admin-dashboard .kmu7-cf-thumb--xs {
  width: 2.25rem;
  height: 2.25rem;
  font-size: calc(0.95rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-thumb--sm {
  width: 3.25rem;
  height: 3.25rem;
  font-size: calc(1.15rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-thumb--md {
  width: 4rem;
  height: 4rem;
  font-size: calc(1.35rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-thumb--lg {
  width: 100%;
  aspect-ratio: 16 / 10;
  font-size: calc(2rem * var(--kmu7-cf-scale));
  border-radius: 12px 12px 0 0;
  border: none;
}

.kmu7-admin-dashboard .kmu7-cf-thumb--video {
  background: linear-gradient(145deg, #2a2f3a 0%, #1f2430 100%);
  color: #fff;
}

.kmu7-admin-dashboard .kmu7-cf-thumb--document {
  background: linear-gradient(145deg, #fff7f0 0%, #ffedd5 100%);
  color: #c2410c;
}

.kmu7-admin-dashboard .kmu7-cf-thumb__open {
  position: absolute;
  right: 0.35rem;
  top: 0.35rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(0.7rem * var(--kmu7-cf-scale));
  text-decoration: none;
}

.kmu7-admin-dashboard .kmu7-cf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.kmu7-admin-dashboard .kmu7-cf-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 14px;
  background: #fffdfb;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.kmu7-admin-dashboard .kmu7-cf-list__item:hover {
  border-color: rgba(242, 101, 34, 0.28);
  box-shadow: 0 4px 14px rgba(242, 101, 34, 0.08);
}

.kmu7-admin-dashboard .kmu7-cf-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin-bottom: 0.25rem;
}

.kmu7-admin-dashboard .kmu7-cf-list__course {
  margin: 0 0 0.35rem;
  font-size: calc(0.84rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kmu7-admin-dashboard .kmu7-cf-list__meta {
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: calc(0.78rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-list__meta i {
  color: var(--kmu7-admin-brand);
  margin-right: 0.2rem;
}

.kmu7-admin-dashboard .kmu7-cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}

.kmu7-admin-dashboard .kmu7-cf-card {
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.kmu7-admin-dashboard .kmu7-cf-card:hover {
  border-color: rgba(242, 101, 34, 0.3);
  box-shadow: 0 8px 22px rgba(242, 101, 34, 0.1);
  transform: translateY(-1px);
}

.kmu7-admin-dashboard .kmu7-cf-card__body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
}

.kmu7-admin-dashboard .kmu7-cf-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.kmu7-admin-dashboard .kmu7-cf-card__size {
  font-size: calc(0.76rem * var(--kmu7-cf-scale));
  font-weight: 700;
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-card__name {
  font-weight: 700;
  font-size: calc(0.9rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-brand-deep);
  text-decoration: none;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kmu7-admin-dashboard .kmu7-cf-card__name:hover {
  color: var(--kmu7-admin-brand);
}

.kmu7-admin-dashboard .kmu7-cf-card__name--plain {
  color: var(--kmu7-admin-ink);
}

.kmu7-admin-dashboard .kmu7-cf-card__course {
  margin: 0;
  font-size: calc(0.78rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kmu7-admin-dashboard .kmu7-cf-card__date {
  margin: 0;
  font-size: calc(0.74rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-admin-dashboard .kmu7-cf-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 12px;
  background: #fff;
}

.kmu7-admin-dashboard .kmu7-cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.95rem * var(--kmu7-cf-scale));
}

.kmu7-admin-dashboard .kmu7-cf-table thead th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: calc(0.88rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
  background: #fafafa;
  border-bottom: 2px solid var(--kmu7-admin-line);
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-cf-table tbody td {
  padding: 1rem;
  vertical-align: top;
  border-bottom: 1px solid #e4e6eb;
  line-height: 1.45;
}

.kmu7-admin-dashboard .kmu7-cf-table tbody tr:last-child td {
  border-bottom: none;
}

.kmu7-admin-dashboard .kmu7-cf-table tbody tr:nth-child(even) td {
  background: #fcfcfd;
}

.kmu7-admin-dashboard .kmu7-cf-table tbody tr:hover td {
  background: #fffaf7;
}

.kmu7-admin-dashboard .kmu7-cf-table__file-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 14rem;
}

.kmu7-admin-dashboard .kmu7-cf-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 8.5rem;
}

.kmu7-admin-dashboard .kmu7-cf-actions__form {
  margin: 0;
}

.kmu7-admin-dashboard .kmu7-cf-actions__btn {
  width: 100%;
  justify-content: flex-start;
  gap: 0.4rem;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-cf-actions__btn--danger {
  color: #b91c1c !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

.kmu7-admin-dashboard .kmu7-cf-actions__btn--danger:hover {
  background: #fef2f2 !important;
}

.kmu7-admin-dashboard .kmu7-cf-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kmu7-admin-line);
}

.kmu7-admin-dashboard .kmu7-cf-pager__info {
  font-size: calc(0.85rem * var(--kmu7-cf-scale));
  color: var(--kmu7-admin-ink-muted);
}

@media (max-width: 1100px) {
  .kmu7-admin-dashboard .kmu7-cf-layout {
    grid-template-columns: 1fr;
  }

  .kmu7-admin-dashboard .kmu7-cf-sidebar {
    position: static;
  }

  .kmu7-admin-dashboard .kmu7-cf-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.65rem;
  }

  .kmu7-admin-dashboard .kmu7-cf-filter-actions {
    flex-direction: row;
    grid-column: 1 / -1;
  }

  .kmu7-admin-dashboard .kmu7-cf-filter-submit {
    width: auto;
  }
}

@media (max-width: 720px) {
  .kmu7-admin-dashboard .kmu7-cf-view-btn span {
    display: none;
  }

  .kmu7-admin-dashboard .kmu7-cf-list__item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .kmu7-admin-dashboard .kmu7-cf-list__item .kmu7-cf-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .kmu7-admin-dashboard .kmu7-cf-actions__btn {
    width: auto;
    flex: 1 1 auto;
  }

  .kmu7-admin-dashboard .kmu7-cf-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-admin-courses-pub-form {
  margin: 0.4rem 0 0;
}

.kmu7-admin-dashboard .kmu7-admin-courses-page .kmu7-admin-courses-pub-toggle {
  white-space: nowrap;
  font-size: calc(0.88rem * var(--kmu7-courses-scale));
}

/* ==========================================================================
   Course detail page (course_detail.php) — modern redesign, +30% typography
   ========================================================================== */
body.kmu7-portal-body .kmu7-cdp {
  --cdp: 1.3; /* +30% typography scale */
  display: block;
  color: #1d2433;
}

body.kmu7-portal-body .kmu7-cdp__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  color: #667085;
  font-size: calc(0.9rem * var(--cdp));
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

body.kmu7-portal-body .kmu7-cdp__back:hover {
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-cdp__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 150px;
  padding: 1.6rem 1.75rem;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #6941f5 0%, #4338ca 55%, #2563eb 100%);
  box-shadow: 0 18px 40px rgba(67, 56, 202, 0.22);
}

body.kmu7-portal-body .kmu7-cdp__hero--media {
  min-height: 280px;
}

body.kmu7-portal-body .kmu7-cdp__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

body.kmu7-portal-body .kmu7-cdp__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.05) 0%, rgba(17, 24, 39, 0.35) 45%, rgba(17, 24, 39, 0.82) 100%);
}

body.kmu7-portal-body .kmu7-cdp__hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
}

body.kmu7-portal-body .kmu7-cdp__hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

body.kmu7-portal-body .kmu7-cdp__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: calc(0.72rem * var(--cdp));
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}

body.kmu7-portal-body .kmu7-cdp__chip--tag {
  background: rgba(255, 255, 255, 0.92);
  color: #6941f5;
  text-transform: uppercase;
}

body.kmu7-portal-body .kmu7-cdp__chip--target {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

body.kmu7-portal-body .kmu7-cdp__hero-title {
  margin: 0;
  color: #fff;
  font-size: calc(1.55rem * var(--cdp));
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

body.kmu7-portal-body .kmu7-cdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

body.kmu7-portal-body .kmu7-cdp__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

body.kmu7-portal-body .kmu7-cdp__section {
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
}

body.kmu7-portal-body .kmu7-cdp__section-title {
  margin: 0 0 0.85rem;
  font-size: calc(1.12rem * var(--cdp));
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111827;
}

body.kmu7-portal-body .kmu7-cdp__desc,
body.kmu7-portal-body .kmu7-cdp__rich {
  font-size: calc(0.95rem * var(--cdp));
  line-height: 1.7;
  color: #475467;
}

body.kmu7-portal-body .kmu7-cdp__muted {
  margin: 0;
  font-size: calc(0.92rem * var(--cdp));
  color: #667085;
}

body.kmu7-portal-body .kmu7-cdp__outline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 1rem;
}

body.kmu7-portal-body .kmu7-cdp__outline-head .kmu7-cdp__section-title {
  margin: 0;
}

body.kmu7-portal-body .kmu7-cdp__lockpill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fed7aa;
  font-size: calc(0.74rem * var(--cdp));
  font-weight: 700;
  line-height: 1.3;
}

body.kmu7-portal-body .kmu7-cdp__outline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cdp-lesson;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

body.kmu7-portal-body .kmu7-cdp__outline-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fbfbfd;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.kmu7-portal-body .kmu7-cdp__outline-item:hover {
  border-color: #ddd6fe;
  background: #faf8ff;
}

body.kmu7-portal-body .kmu7-cdp__outline-index {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(1.85rem * var(--cdp));
  height: calc(1.85rem * var(--cdp));
  border-radius: 10px;
  background: #ede9fe;
  color: #6941f5;
  font-size: calc(0.88rem * var(--cdp));
  font-weight: 800;
}

body.kmu7-portal-body .kmu7-cdp__outline-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(0.95rem * var(--cdp));
  font-weight: 600;
  color: #1d2433;
}

body.kmu7-portal-body .kmu7-cdp__outline-lock {
  flex: 0 0 auto;
  width: calc(1.1rem * var(--cdp));
  height: calc(1.1rem * var(--cdp));
  color: #b0b7c3;
}

body.kmu7-portal-body .kmu7-cdp__aside {
  position: sticky;
  top: 1.25rem;
}

body.kmu7-portal-body .kmu7-cdp__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem 1.45rem;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
}

body.kmu7-portal-body .kmu7-cdp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #6941f5 0%, #4f46e5 100%);
  color: #fff;
  font-size: calc(1rem * var(--cdp, 1.3));
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

body.kmu7-portal-body .kmu7-cdp__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.38);
}

body.kmu7-portal-body .kmu7-cdp__cta--ghost {
  background: #fff;
  color: #6941f5;
  border: 1.5px solid #c7b9fb;
  box-shadow: none;
}

body.kmu7-portal-body .kmu7-cdp__cta--ghost:hover {
  background: #faf8ff;
  filter: none;
  box-shadow: none;
}

body.kmu7-portal-body .kmu7-cdp__notice {
  margin: 0;
  font-size: calc(0.86rem * var(--cdp));
  line-height: 1.55;
  color: #667085;
}

body.kmu7-portal-body .kmu7-cdp__facts {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0 0;
  border-top: 1px solid #f0f1f4;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.kmu7-portal-body .kmu7-cdp__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

body.kmu7-portal-body .kmu7-cdp__fact-label {
  flex: 0 0 auto;
  font-size: calc(0.82rem * var(--cdp));
  color: #98a2b3;
  font-weight: 600;
}

body.kmu7-portal-body .kmu7-cdp__fact-value {
  font-size: calc(0.92rem * var(--cdp));
  font-weight: 800;
  color: #1d2433;
  text-align: right;
}

body.kmu7-portal-body .kmu7-cdp__fact-value--wrap {
  font-weight: 600;
}

body.kmu7-portal-body .kmu7-cdp__rewards {
  padding-top: 0.85rem;
  border-top: 1px solid #f0f1f4;
}

body.kmu7-portal-body .kmu7-cdp__rewards-label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: calc(0.82rem * var(--cdp));
  font-weight: 700;
  color: #98a2b3;
}

body.kmu7-portal-body .kmu7-cdp__reward-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

body.kmu7-portal-body .kmu7-cdp__reward {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fbfbfd;
}

body.kmu7-portal-body .kmu7-cdp__reward-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(2.35rem * var(--cdp));
  height: calc(2.35rem * var(--cdp));
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

body.kmu7-portal-body .kmu7-cdp__reward-icon i {
  font-size: calc(1.08rem * var(--cdp));
  line-height: 1;
}

body.kmu7-portal-body .kmu7-cdp__reward-icon--cert {
  background: linear-gradient(145deg, #fff7d6, #fde68a);
  color: #b45309;
}

body.kmu7-portal-body .kmu7-cdp__reward-icon--card {
  background: linear-gradient(145deg, #ecfdf3, #bbf7d0);
  color: #15803d;
}

body.kmu7-portal-body .kmu7-cdp__reward-text {
  font-size: calc(0.92rem * var(--cdp));
  font-weight: 700;
  color: #1d2433;
}

body.kmu7-portal-body .kmu7-cdp__sdgs {
  padding-top: 0.85rem;
  border-top: 1px solid #f0f1f4;
}

body.kmu7-portal-body .kmu7-cdp__sdgs-label {
  display: block;
  margin-bottom: 0.65rem;
  font-size: calc(0.82rem * var(--cdp));
  font-weight: 700;
  color: #98a2b3;
}

body.kmu7-portal-body .kmu7-cdp__sdg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
}

body.kmu7-portal-body .kmu7-cdp__sdg-item {
  margin: 0;
  min-width: 0;
}

body.kmu7-portal-body .kmu7-cdp__sdg-item img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}

body.kmu7-portal-body .kmu7-cdp-notfound {
  text-align: center;
}

body.kmu7-portal-body .kmu7-cdp-notfound__title {
  margin: 0 0 0.6rem;
  font-size: calc(1.4rem * 1.3);
  font-weight: 800;
  color: #111827;
}

body.kmu7-portal-body .kmu7-cdp-notfound__lead {
  margin: 0 auto 1.25rem;
  max-width: 32rem;
  font-size: calc(0.95rem * 1.3);
  color: #667085;
}

body.kmu7-portal-body .kmu7-cdp-notfound .kmu7-cdp__cta {
  width: auto;
  margin: 0 auto;
}

@media (max-width: 920px) {
  body.kmu7-portal-body .kmu7-cdp__layout {
    grid-template-columns: 1fr;
  }

  body.kmu7-portal-body .kmu7-cdp__aside {
    position: static;
  }
}

/* ==========================================================================
   Lesson page (lesson.php) — overview hub + single lesson view (+30% type)
   ========================================================================== */
body.kmu7-portal-body .kmu7-lessonhub__head,
body.kmu7-portal-body .kmu7-lessonhub__list,
body.kmu7-portal-body .kmu7-lessonhub__posttest,
body.kmu7-portal-body .kmu7-lessonview {
  --cdp: 1.3;
}

body.kmu7-portal-body .kmu7-lessonview__crumbs {
  margin-bottom: 1rem;
}

body.kmu7-portal-body .kmu7-lessonview__crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #667085;
  font-size: calc(0.9rem * var(--cdp, 1.3));
  font-weight: 600;
  text-decoration: none;
}

body.kmu7-portal-body .kmu7-lessonview__crumbs a:hover {
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-lessonhub__head {
  margin-bottom: 1.4rem;
}

body.kmu7-portal-body .kmu7-lessonhub__title {
  margin: 0.2rem 0 0.9rem;
  font-size: calc(1.45rem * var(--cdp));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111827;
}

body.kmu7-portal-body .kmu7-lessonhub__progress {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

body.kmu7-portal-body .kmu7-lessonhub__bar {
  flex: 1 1 auto;
  height: 0.7rem;
  border-radius: 999px;
  background: #eceef2;
  overflow: hidden;
}

body.kmu7-portal-body .kmu7-lessonhub__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  transition: width 0.3s ease;
}

body.kmu7-portal-body .kmu7-lessonhub__progress-text {
  flex: 0 0 auto;
  font-size: calc(0.85rem * var(--cdp));
  font-weight: 700;
  color: #475467;
}

body.kmu7-portal-body .kmu7-lessonhub__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  counter-reset: none;
}

body.kmu7-portal-body .kmu7-lessonhub__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.05rem;
  padding: 1.05rem 1.25rem;
  background: #fff;
  border: 1px solid #edeff3;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.kmu7-portal-body .kmu7-lessonhub__card:hover {
  transform: translateY(-1px);
  border-color: #ddd6fe;
  box-shadow: 0 12px 26px rgba(76, 70, 229, 0.1);
}

body.kmu7-portal-body .kmu7-lessonhub__item.is-done .kmu7-lessonhub__card {
  border-color: #c7eed4;
  background: linear-gradient(180deg, #f5fdf8 0%, #fff 60%);
}

body.kmu7-portal-body .kmu7-lessonhub__index {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(1.6rem * var(--cdp));
  color: #6941f5;
  font-size: calc(1.28rem * var(--cdp));
  font-weight: 800;
}

body.kmu7-portal-body .kmu7-lessonhub__index svg {
  width: calc(1.5rem * var(--cdp));
  height: calc(1.5rem * var(--cdp));
}

body.kmu7-portal-body .kmu7-lessonhub__item.is-done .kmu7-lessonhub__index {
  color: #16a34a;
}

body.kmu7-portal-body .kmu7-lessonhub__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

body.kmu7-portal-body .kmu7-lessonhub__name {
  font-size: calc(1.25rem * var(--cdp));
  font-weight: 700;
  line-height: 1.35;
  color: #1d2433;
}

body.kmu7-portal-body .kmu7-lessonhub__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

body.kmu7-portal-body .kmu7-lessonhub__state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: calc(0.74rem * var(--cdp));
  font-weight: 700;
  color: #98a2b3;
}

body.kmu7-portal-body .kmu7-lessonhub__state::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #cbd2dc;
}

body.kmu7-portal-body .kmu7-lessonhub__state.is-done {
  color: #16a34a;
}

body.kmu7-portal-body .kmu7-lessonhub__state.is-done::before {
  background: #16a34a;
}

body.kmu7-portal-body .kmu7-lessonhub__ic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
}

body.kmu7-portal-body .kmu7-lessonhub__ic svg {
  width: calc(0.95rem * var(--cdp));
  height: calc(0.95rem * var(--cdp));
}

body.kmu7-portal-body .kmu7-lessonhub__ic--video {
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-lessonhub__ic--docs {
  color: #2563eb;
}

body.kmu7-portal-body .kmu7-lessonhub__ic-count {
  font-size: calc(0.62rem * var(--cdp));
  font-weight: 800;
  color: inherit;
  margin-left: 0.1rem;
}

body.kmu7-portal-body .kmu7-lessonhub__action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: calc(0.82rem * var(--cdp));
  font-weight: 800;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-lessonhub__action span {
  white-space: nowrap;
}

body.kmu7-portal-body .kmu7-lessonhub__action svg {
  width: calc(1rem * var(--cdp));
  height: calc(1rem * var(--cdp));
  transition: transform 0.16s ease;
}

body.kmu7-portal-body .kmu7-lessonhub__card:hover .kmu7-lessonhub__action svg {
  transform: translateX(3px);
}

body.kmu7-portal-body .kmu7-lessonhub__item.is-done .kmu7-lessonhub__action {
  color: #16a34a;
}

body.kmu7-portal-body .kmu7-lessonhub__posttest {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid #eceef2;
}

body.kmu7-portal-body .kmu7-cdp__cta--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  white-space: nowrap;
}

body.kmu7-portal-body .kmu7-cdp__cta--icon svg {
  flex: 0 0 auto;
  width: calc(1.1rem * var(--cdp, 1.3));
  height: calc(1.1rem * var(--cdp, 1.3));
}

body.kmu7-portal-body .kmu7-lessonhub__posttest .kmu7-cdp__cta {
  width: auto;
  min-width: 16rem;
}

body.kmu7-portal-body .kmu7-cdp__cta--locked {
  background: #d0d5dd;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}

body.kmu7-portal-body .kmu7-cdp__cta--locked:hover {
  background: #c4cad3;
  transform: none;
  filter: none;
  box-shadow: none;
}

body.kmu7-portal-body .kmu7-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

body.kmu7-portal-body .kmu7-modal.is-hidden {
  display: none;
}

body.kmu7-portal-body .kmu7-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(2px);
}

body.kmu7-portal-body .kmu7-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 24rem;
  padding: 1.6rem 1.5rem 1.4rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.28);
  text-align: center;
  animation: kmu7-modal-pop 0.16s ease-out;
}

@keyframes kmu7-modal-pop {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

body.kmu7-portal-body .kmu7-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: #fff7ed;
  color: #d97706;
}

body.kmu7-portal-body .kmu7-modal__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

body.kmu7-portal-body .kmu7-modal__text {
  margin: 0 0 1.25rem;
  font-size: calc(0.98rem * var(--cdp, 1.3));
  line-height: 1.6;
  color: #344054;
}

body.kmu7-portal-body .kmu7-modal__box .kmu7-cdp__cta {
  width: 100%;
}

body.kmu7-portal-body .kmu7-modal__box.kmu7-safety-picker-modal__box {
  max-width: min(36rem, 100%);
  padding: 1.35rem 1.25rem 1.15rem;
  text-align: left;
}

body.kmu7-portal-body .kmu7-safety-picker-modal__title {
  margin: 0 0 0.35rem;
  font-size: calc(1.288rem * var(--cdp, 1));
  font-weight: 800;
  color: #111827;
}

body.kmu7-portal-body .kmu7-safety-picker-modal__lead {
  margin: 0 0 1rem;
  font-size: calc(1.058rem * var(--cdp, 1));
  line-height: 1.5;
  color: #475467;
}

body.kmu7-portal-body .kmu7-safety-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(52vh, 24rem);
  overflow: auto;
}

body.kmu7-portal-body .kmu7-safety-picker-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #f9fafb;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

body.kmu7-portal-body .kmu7-safety-picker-item:hover {
  border-color: #f97316;
  background: #fff7ed;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.12);
}

body.kmu7-portal-body .kmu7-safety-picker-item__title {
  font-size: calc(1.081rem * var(--cdp, 1));
  font-weight: 700;
  line-height: 1.45;
  color: #111827;
}

body.kmu7-portal-body .kmu7-safety-picker-item__meta {
  font-size: calc(0.966rem * var(--cdp, 1));
  color: #667085;
}

body.kmu7-portal-body .kmu7-safety-picker-modal__foot {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

body.kmu7-portal-body .kmu7-modal__box.kmu7-safety-picker-modal__box .kmu7-safety-picker-modal__cancel {
  min-width: 6.5rem;
  min-height: 2.75rem;
  padding: 0.78rem 1.25rem;
  font-size: calc(1.0925rem * var(--cdp, 1));
  font-weight: 700;
  background: #ffffff;
  color: #344054;
  border: 1px solid #98a2b3;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

body.kmu7-portal-body .kmu7-modal__box.kmu7-safety-picker-modal__box .kmu7-safety-picker-modal__cancel:hover {
  background: #f9fafb;
  border-color: #667085;
  color: #111827;
}

body.kmu7-portal-body .kmu7-lessonhub__alldone {
  margin: 0;
  font-size: calc(1rem * var(--cdp));
  font-weight: 700;
  color: #16a34a;
}

/* --- single lesson view --- */
body.kmu7-portal-body .kmu7-lessonview {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 18px;
  padding: 1.6rem 1.75rem 1.75rem;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.04);
}

body.kmu7-portal-body .kmu7-lessonview__head {
  margin-bottom: 1.25rem;
}

body.kmu7-portal-body .kmu7-lessonview__eyebrow {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: calc(0.78rem * var(--cdp));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-lessonview__title {
  margin: 0;
  font-size: calc(1.45rem * var(--cdp));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111827;
}

body.kmu7-portal-body .kmu7-lessonview__block {
  margin-top: 1.4rem;
}

body.kmu7-portal-body .kmu7-lessonview__blocktitle {
  margin: 0 0 0.75rem;
  font-size: calc(1.05rem * var(--cdp));
  font-weight: 800;
  color: #111827;
}

body.kmu7-portal-body .kmu7-lessonview__desc {
  font-size: calc(0.95rem * var(--cdp));
  line-height: 1.75;
  color: #475467;
}

body.kmu7-portal-body .kmu7-lessontabs {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid #eceef2;
}

body.kmu7-portal-body .kmu7-lessontabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem 0.85rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2.5px solid transparent;
  background: transparent;
  color: #98a2b3;
  font-size: calc(0.92rem * var(--cdp));
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

body.kmu7-portal-body .kmu7-lessontabs__tab svg {
  width: calc(1rem * var(--cdp));
  height: calc(1rem * var(--cdp));
}

body.kmu7-portal-body .kmu7-lessontabs__tab:hover {
  color: #475467;
}

body.kmu7-portal-body .kmu7-lessontabs__tab.is-active {
  color: #6941f5;
  border-bottom-color: #6941f5;
}

body.kmu7-portal-body .kmu7-lessontabs__panel {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

body.kmu7-portal-body .kmu7-lessontabs__panel.is-hidden {
  display: none;
}

body.kmu7-portal-body .kmu7-lessonview__doc-ext {
  flex: 0 0 auto;
  width: calc(1rem * var(--cdp));
  height: calc(1rem * var(--cdp));
  margin-left: auto;
  color: #98a2b3;
}

body.kmu7-portal-body .kmu7-lessonview__video {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1020;
}

body.kmu7-portal-body .kmu7-lessonview__video video,
body.kmu7-portal-body .kmu7-lessonview__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

body.kmu7-portal-body .kmu7-lessonview__lockhint {
  margin: 0.6rem 0 0;
  font-size: calc(0.84rem * var(--cdp));
  color: #b45309;
}

body.kmu7-portal-body .kmu7-lessonview__docs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

body.kmu7-portal-body .kmu7-lessonview__doc a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fbfbfd;
  text-decoration: none;
  color: #1d2433;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.kmu7-portal-body .kmu7-lessonview__doc a:hover {
  border-color: #c7b9fb;
  background: #faf8ff;
}

body.kmu7-portal-body .kmu7-lessonview__doc-icon {
  flex: 0 0 auto;
  width: calc(1.25rem * var(--cdp));
  height: calc(1.25rem * var(--cdp));
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-lessonview__doc-name {
  font-size: calc(0.92rem * var(--cdp));
  font-weight: 600;
  word-break: break-word;
}

body.kmu7-portal-body .kmu7-lessonview__empty {
  margin: 1.2rem 0 0;
  font-size: calc(0.95rem * var(--cdp));
  color: #667085;
}

body.kmu7-portal-body .kmu7-lessonview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid #f0f1f4;
}

body.kmu7-portal-body .kmu7-lessonview__finishform {
  margin: 0;
}

body.kmu7-portal-body .kmu7-lessonview__foot .kmu7-cdp__cta {
  width: auto;
  min-width: 14rem;
}

body.kmu7-portal-body .kmu7-cdp__cta:disabled {
  background: #d0d5dd;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

body.kmu7-portal-body .kmu7-lessonview__donebadge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: calc(0.85rem * var(--cdp));
  font-weight: 800;
}

@media (max-width: 720px) {
  body.kmu7-portal-body .kmu7-lessonhub__action span {
    display: none;
  }

  body.kmu7-portal-body .kmu7-lessonhub__posttest .kmu7-cdp__cta {
    width: 100%;
    min-width: 0;
  }

  body.kmu7-portal-body .kmu7-lessonview {
    padding: 1.2rem 1.1rem 1.3rem;
  }
}

/* ==========================================================================
   Post-test / quiz page (course_quiz.php)
   ========================================================================== */
.kmu7-quiz-copy-protected {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.kmu7-quiz-copy-protected img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.kmu7-quiz-copy-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(0.75rem);
  z-index: 1400;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.65rem 1rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.kmu7-quiz-copy-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.kmu7-quiz-capture-shield {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  z-index: 2147483646;
  pointer-events: none;
}
html.kmu7-quiz-capture-shielded .kmu7-quiz-capture-shield {
  display: block !important;
}
html.kmu7-quiz-capture-shielded .kmu7-academos-sidebar,
html.kmu7-quiz-capture-shielded .kmu7-academos-topbar,
html.kmu7-quiz-capture-shielded .kmu7-quiz-copy-guard,
html.kmu7-quiz-capture-shielded .kmu7-quiz-copy-toast {
  visibility: hidden !important;
}
html.kmu7-quiz-capture-shielded,
html.kmu7-quiz-capture-shielded body.kmu7-portal-body {
  background: #000 !important;
}

body.kmu7-portal-body .kmu7-quizintro,
body.kmu7-portal-body .kmu7-quiz,
body.kmu7-portal-body .kmu7-quizresult {
  --cdp: 1.3;
  color: #1d2433;
}

.kmu7-quiz-refresh-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.kmu7-quiz-refresh-modal[hidden] {
  display: none;
}
.kmu7-quiz-refresh-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.kmu7-quiz-refresh-modal__panel {
  position: relative;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eceef2;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}
.kmu7-quiz-refresh-modal__title {
  margin: 0 0 0.55rem;
  font-size: calc(1.1rem * var(--cdp, 1));
  font-weight: 800;
  color: #101828;
}
.kmu7-quiz-refresh-modal__body {
  margin: 0 0 1.1rem;
  font-size: calc(0.92rem * var(--cdp, 1));
  line-height: 1.65;
  color: #475467;
}
.kmu7-quiz-refresh-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* ---- Intro screen ---- */
body.kmu7-portal-body .kmu7-quizintro {
  max-width: 760px;
  margin: 0 auto;
}

body.kmu7-portal-body .kmu7-quizintro__head {
  text-align: center;
  margin-bottom: 1.6rem;
}

body.kmu7-portal-body .kmu7-quizintro__eyebrow {
  display: inline-block;
  padding: 0.3rem 0.95rem;
  border-radius: 999px;
  background: #f3f0ff;
  color: #6941f5;
  font-size: calc(0.8rem * var(--cdp));
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}

body.kmu7-portal-body .kmu7-quizintro__title {
  margin: 0;
  font-size: calc(1.55rem * var(--cdp));
  font-weight: 800;
  line-height: 1.3;
  color: #101828;
}

body.kmu7-portal-body .kmu7-quizintro__alert {
  margin-bottom: 1.1rem;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
  font-size: calc(0.9rem * var(--cdp));
}

body.kmu7-portal-body .kmu7-quizintro__panel {
  padding: 1.75rem 1.85rem;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
}

body.kmu7-portal-body .kmu7-quizintro__subtitle {
  margin: 0 0 0.7rem;
  font-size: calc(1.15rem * var(--cdp));
  font-weight: 800;
  color: #101828;
}

body.kmu7-portal-body .kmu7-quizintro__lead {
  margin: 0 0 1.2rem;
  font-size: calc(0.95rem * var(--cdp));
  line-height: 1.7;
  color: #475467;
}

body.kmu7-portal-body .kmu7-quizintro__facts {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

body.kmu7-portal-body .kmu7-quizintro__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 1.05rem;
  background: #f9fafb;
  border: 1px solid #eef0f4;
  border-radius: 14px;
  font-size: calc(0.95rem * var(--cdp));
  line-height: 1.6;
  color: #344054;
}

body.kmu7-portal-body .kmu7-quizintro__facts svg {
  flex: 0 0 auto;
  width: calc(1.15rem * var(--cdp));
  height: calc(1.15rem * var(--cdp));
  margin-top: 0.15rem;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-quizintro__startform {
  margin: 0;
}

body.kmu7-portal-body .kmu7-quizintro__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.3rem;
  color: #667085;
  font-size: calc(0.9rem * var(--cdp));
  font-weight: 600;
  text-decoration: none;
}

body.kmu7-portal-body .kmu7-quizintro__back:hover {
  color: #6941f5;
}

/* ---- Quiz taking ---- */
body.kmu7-portal-body .kmu7-quiz {
  max-width: 860px;
  margin: 0 auto;
}

body.kmu7-portal-body .kmu7-quiz__bar {
  padding: 0;
  margin-bottom: 1.5rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.kmu7-portal-body .kmu7-quiz__timer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed #e4e7ec;
}

body.kmu7-portal-body .kmu7-quiz__timer-label {
  font-size: calc(0.85rem * var(--cdp));
  font-weight: 700;
  color: #475467;
}

body.kmu7-portal-body .kmu7-quiz__timer-value {
  font-size: calc(1.05rem * var(--cdp));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #101828;
}

body.kmu7-portal-body .kmu7-quiz__timer-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #eef0f4;
  overflow: hidden;
}

body.kmu7-portal-body .kmu7-quiz__timer-track span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6941f5, #4f46e5);
  transition: width 1s linear;
}

body.kmu7-portal-body .kmu7-quiz__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

body.kmu7-portal-body .kmu7-quiz__gridbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1.5px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  color: #475467;
  font-size: calc(0.85rem * var(--cdp));
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

body.kmu7-portal-body .kmu7-quiz__gridbtn:hover {
  border-color: #6941f5;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-quiz__gridbtn.is-done {
  background: #ecfdf3;
  border-color: #34c759;
  color: #1a7f37;
}

body.kmu7-portal-body .kmu7-quiz__gridbtn.is-current {
  background: #fffaeb;
  border-color: #f5a524;
  color: #b54708;
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.18);
}

body.kmu7-portal-body .kmu7-quiz__q {
  padding: 1.6rem 1.75rem;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
}

body.kmu7-portal-body .kmu7-quiz__q.is-hidden {
  display: none;
}

body.kmu7-portal-body .kmu7-quiz__qnum {
  display: inline-block;
  margin-bottom: 0.8rem;
  color: #6941f5;
  font-size: calc(0.88rem * var(--cdp));
  font-weight: 800;
}

body.kmu7-portal-body .kmu7-quiz__qbody {
  font-size: calc(1.1rem * var(--cdp));
  font-weight: 600;
  line-height: 1.6;
  color: #101828;
}

body.kmu7-portal-body .kmu7-quiz__qimg {
  margin: 1rem 0;
}

body.kmu7-portal-body .kmu7-quiz__qimg img {
  max-width: 100%;
  max-height: 320px;
  border-radius: 12px;
}

body.kmu7-portal-body .kmu7-quiz__options {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

body.kmu7-portal-body .kmu7-quiz__option {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid #e4e7ec;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

body.kmu7-portal-body .kmu7-quiz__option:hover {
  border-color: #b9a8fb;
  background: #faf8ff;
}

body.kmu7-portal-body .kmu7-quiz__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body.kmu7-portal-body .kmu7-quiz__option-mark {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.15rem;
  border: 2px solid #c0c6d0;
  border-radius: 50%;
  transition: border-color 0.12s ease;
}

body.kmu7-portal-body .kmu7-quiz__option-body {
  font-size: calc(0.98rem * var(--cdp));
  line-height: 1.55;
  color: #344054;
}

body.kmu7-portal-body .kmu7-quiz__option-img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin-top: 0.5rem;
  border-radius: 8px;
}

body.kmu7-portal-body .kmu7-quiz__option:has(input:checked) {
  border-color: #6941f5;
  background: #f3f0ff;
}

body.kmu7-portal-body .kmu7-quiz__option:has(input:checked) .kmu7-quiz__option-mark {
  border-color: #6941f5;
  background: radial-gradient(circle, #6941f5 0 45%, transparent 52%);
}

body.kmu7-portal-body .kmu7-quiz__nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.4rem;
}

body.kmu7-portal-body .kmu7-quiz__nav .kmu7-cdp__cta {
  width: auto;
  min-width: 120px;
}

body.kmu7-portal-body .kmu7-quiz__answered {
  margin-left: auto;
  font-size: calc(0.92rem * var(--cdp));
  font-weight: 700;
  color: #475467;
  font-variant-numeric: tabular-nums;
}

body.kmu7-portal-body .kmu7-quiz__finish {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.3);
}

body.kmu7-portal-body .kmu7-quiz__finish:hover {
  box-shadow: 0 14px 28px rgba(22, 163, 74, 0.4);
}

body.kmu7-portal-body .kmu7-quiz__nav .is-hidden {
  display: none;
}

/* ---- Result ---- */
body.kmu7-portal-body .kmu7-quizresult {
  max-width: 560px;
  margin: 1.5rem auto;
}

body.kmu7-portal-body .kmu7-quizresult__card {
  padding: 2.4rem 2rem;
  text-align: center;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.1);
}

body.kmu7-portal-body .kmu7-quizresult__icon svg {
  width: calc(3.6rem * var(--cdp));
  height: calc(3.6rem * var(--cdp));
}

body.kmu7-portal-body .kmu7-quizresult__card--pass .kmu7-quizresult__icon {
  color: #16a34a;
}

body.kmu7-portal-body .kmu7-quizresult__card--fail .kmu7-quizresult__icon {
  color: #f04438;
}

body.kmu7-portal-body .kmu7-quizresult__title {
  margin: 0.7rem 0 0.2rem;
  font-size: calc(1.5rem * var(--cdp));
  font-weight: 800;
  color: #101828;
}

body.kmu7-portal-body .kmu7-quizresult__course {
  margin: 0 0 1rem;
  font-size: calc(0.95rem * var(--cdp));
  color: #667085;
}

body.kmu7-portal-body .kmu7-quizresult__score {
  font-size: calc(3rem * var(--cdp));
  font-weight: 800;
  line-height: 1;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-quizresult__card--fail .kmu7-quizresult__score {
  color: #f04438;
}

body.kmu7-portal-body .kmu7-quizresult__score span {
  font-size: calc(1.4rem * var(--cdp));
  margin-left: 0.15rem;
}

body.kmu7-portal-body .kmu7-quizresult__detail {
  margin: 0.6rem 0 1.6rem;
  font-size: calc(1rem * var(--cdp));
  color: #475467;
}

body.kmu7-portal-body .kmu7-quizresult__actions {
  display: grid;
  gap: 0.75rem;
}

body.kmu7-portal-body .kmu7-quizresult__actions form {
  margin: 0;
}

@media (max-width: 640px) {
  body.kmu7-portal-body .kmu7-quiz__nav {
    flex-wrap: wrap;
  }

  body.kmu7-portal-body .kmu7-quiz__nav .kmu7-cdp__cta {
    flex: 1;
    min-width: 0;
  }

  body.kmu7-portal-body .kmu7-quiz__answered {
    order: -1;
    width: 100%;
    text-align: center;
    margin: 0 0 0.3rem;
  }
}

/* ป็อปอัพประกาศแจ้งผู้เรียน */
body.kmu7-portal-body .kmu7-learner-announce {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  place-items: center;
  padding: 1rem;
}

body.kmu7-portal-body .kmu7-learner-announce[hidden] {
  display: none;
}

body.kmu7-portal-body .kmu7-learner-announce__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.52);
  backdrop-filter: blur(3px);
}

body.kmu7-portal-body .kmu7-learner-announce__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  max-height: min(90vh, 680px);
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 64px rgba(16, 24, 40, 0.28);
  text-align: center;
}

body.kmu7-portal-body .kmu7-learner-announce__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #98a2b3;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}

body.kmu7-portal-body .kmu7-learner-announce__close svg {
  width: 1rem;
  height: 1rem;
}

body.kmu7-portal-body .kmu7-learner-announce__close:hover {
  background: #f2f4f7;
  color: #667085;
}

body.kmu7-portal-body .kmu7-learner-announce__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1.5rem 0.85rem;
  background: linear-gradient(180deg, #f5f3ff 0%, #fff 100%);
}

body.kmu7-portal-body .kmu7-learner-announce__illus {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.35rem;
}

body.kmu7-portal-body .kmu7-learner-announce__illus svg {
  width: 5.5rem;
  height: auto;
}

body.kmu7-portal-body .kmu7-learner-announce__label {
  margin: 0;
  width: 100%;
  color: #6941f5;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

body.kmu7-portal-body .kmu7-learner-announce__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  max-height: min(44vh, 300px);
  overflow: auto;
  padding: 0.35rem 1.5rem 0.75rem;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

body.kmu7-portal-body .kmu7-learner-announce__title {
  margin: 0 0 0.5rem;
  width: 100%;
  font-size: 1.6rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
  text-align: center;
}

body.kmu7-portal-body .kmu7-learner-announce__body {
  margin: 0;
  width: 100%;
  color: #667085;
  font-size: 1.25rem;
  line-height: 1.42;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: center;
}

body.kmu7-portal-body .kmu7-learner-announce__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.85rem 1.5rem 1.25rem;
  flex-shrink: 0;
}

body.kmu7-portal-body .kmu7-learner-announce__footer[hidden] {
  display: none;
}

body.kmu7-portal-body .kmu7-learner-announce__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #6941f5);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(105, 65, 245, 0.28);
}

body.kmu7-portal-body .kmu7-learner-announce__cta:hover {
  background: linear-gradient(135deg, #6d33e8, #5b32e6);
}

body.kmu7-portal-body .kmu7-learner-announce__cta[hidden] {
  display: none;
}

body.kmu7-learner-announce-open {
  overflow: hidden;
}

/* หน้ารายการประกาศผู้เรียน */
body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-pagehead {
  margin-bottom: 0.35rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-pagehead__lead {
  margin: 0.35rem 0 0;
  color: #667085;
  font-size: 1.1875rem;
  line-height: 1.45;
  max-width: 42rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-empty {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  border-radius: 18px;
  border: 1px dashed #d0d5dd;
  background: #fafbfc;
  color: #667085;
  font-size: 1.25rem;
  text-align: center;
}

body.kmu7-portal-body .kmu7-announce-empty__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #f3f0ff;
  color: #6941f5;
}

body.kmu7-portal-body .kmu7-announce-empty__icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

body.kmu7-portal-body .kmu7-announce-feed {
  display: grid;
  gap: 1rem;
}

body.kmu7-portal-body .kmu7-announce-feed__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #eceef2;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
}

body.kmu7-portal-body .kmu7-announce-feed__accent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 3.75rem;
  padding: 1.15rem 0 0;
  background: linear-gradient(180deg, #7c3aed, #6941f5);
}

body.kmu7-portal-body .kmu7-announce-feed__icon {
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

body.kmu7-portal-body .kmu7-announce-feed__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

body.kmu7-portal-body .kmu7-announce-feed__main {
  min-width: 0;
  padding: 1.05rem 1.15rem 1.1rem 1rem;
}

body.kmu7-portal-body .kmu7-announce-feed__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.45rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-feed__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.3;
}

body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-feed__date {
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #f3f0ff;
  color: #6941f5;
  font-size: 0.975rem;
  font-weight: 700;
  white-space: nowrap;
}

body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-feed__body {
  margin: 0;
  color: #475467;
  font-size: 1.2rem;
  line-height: 1.45;
  word-break: break-word;
}

body.kmu7-portal-body .kmu7-announce-feed__actions {
  margin-top: 0.7rem;
}

body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-feed__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid #d6bbfb;
  background: #fff;
  color: #6941f5;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

body.kmu7-portal-body .kmu7-announce-feed__link:hover {
  background: #f3f0ff;
}

@media (max-width: 560px) {
  body.kmu7-portal-body .kmu7-announce-feed__item {
    grid-template-columns: 1fr;
  }

  body.kmu7-portal-body .kmu7-announce-feed__accent {
    width: auto;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    align-items: center;
    justify-content: flex-start;
  }
}

/* ฟอร์มสร้างประกาศแจ้งผู้เรียน — ข้อความ +25% */
.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-pageheader__title {
  font-size: calc(1.6rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-pageheader__lead {
  font-size: calc(0.95rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-pageheader__tools .kmu7-btn {
  font-size: calc(0.95rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-alert {
  font-size: calc(0.9rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit .kmu7-field label {
  font-size: calc(0.875rem * 1.4 * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit .kmu7-input,
.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit .kmu7-select,
.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit textarea.kmu7-input {
  font-size: calc(1rem * 1.4 * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit .kmu7-field .kmu7-hint,
.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit .kmu7-hint {
  font-size: calc(0.8rem * 1.4 * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit__actions .kmu7-btn {
  font-size: calc(0.95rem * 1.4 * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-courseform-section__bar {
  font-size: calc(1.12rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-courseform-section__icon {
  font-size: calc(1rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-courseform-section__lede {
  font-size: calc(0.9rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-courseform-subtitle {
  font-size: calc(0.98rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-admin-reg-edit .kmu7-admin-courseform-ut-grid.kmu7-field .kmu7-check,
.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-course-bulk .kmu7-check,
.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-course-tree fieldset .kmu7-check {
  font-size: calc(0.875rem * 1.25);
}

.kmu7-admin-dashboard .kmu7-learner-announce-form-page .kmu7-course-tree legend {
  font-size: calc(0.95rem * 1.08 * 1.25);
}

/* ===== Learner portal — theme toggle (desktop / laptop) ===== */
body.kmu7-portal-body .kmu7-academos-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 2.55rem;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  padding: 0;
}

body.kmu7-portal-body .kmu7-academos-theme-toggle:hover {
  background: #f8f9fc;
  border-color: #c7cdd6;
  color: #344054;
}

body.kmu7-portal-body .kmu7-academos-theme-toggle__icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.28rem;
  height: 1.28rem;
  line-height: 1;
}

body.kmu7-portal-body .kmu7-academos-theme-toggle__icon i {
  font-size: 1.05rem;
  line-height: 1;
}

html.kmu7-portal-html:not(.kmu7-theme-dark) body.kmu7-portal-body .kmu7-academos-theme-toggle__icon--moon {
  display: inline-flex;
}

html.kmu7-theme-dark.kmu7-portal-html body.kmu7-portal-body .kmu7-academos-theme-toggle__icon--sun {
  display: inline-flex;
}

@media (max-width: 960px) {
  body.kmu7-portal-body .kmu7-academos-theme-toggle {
    display: none;
  }
}

/* ===== Learner portal — dark theme ===== */
html.kmu7-theme-dark body.kmu7-portal-body {
  background: #0f1117;
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-academos-ui {
  background: #0f1117;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-sidebar {
  background: #151922;
  border-right-color: #262b36;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-brand,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-topbar__brand {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-navgroup__label {
  color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-nav__link,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-help {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-nav__link:hover,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-help:hover {
  background: #1c2230;
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-nav__link.is-active {
  background: rgba(105, 65, 245, 0.18);
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-topbar {
  background: rgba(21, 25, 34, 0.88);
  border-bottom-color: rgba(38, 43, 54, 0.95);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-topbar__brand-mode {
  color: #a78bfa;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-topbar__brand-org,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-pagehead__title {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-profile__name {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-profile__role,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-pagehead__lead,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-note,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-empty,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-empty-hint {
  color: #b6c0cf;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-lang--topbar,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-theme-toggle {
  border-color: #3a4150;
  background: transparent;
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-lang--topbar:hover,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-theme-toggle:hover {
  background: #1c2230;
  border-color: #4b5563;
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-lang__link {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-lang__link:hover {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-lang__link.is-active {
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-lang__sep {
  color: #4b5563;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-panel,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__section,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__card {
  background: #181d27;
  border-color: #2a3140;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.36);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card__title,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__section-title,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__hero-title {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card__students,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__desc,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__rich,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__muted {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card__price {
  color: #60a5fa;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card__tag {
  background: rgba(105, 65, 245, 0.2);
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-empty-block {
  background: #151922;
  border-color: #3a4150;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-filters__search .kmu7-input,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-filters__select.kmu7-select,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-input,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-select,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-textarea {
  background-color: #1c2230;
  border-color: #343b4a;
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-input::placeholder,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-textarea::placeholder {
  color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-btn--ghost {
  background: #1c2230;
  color: #e5e7eb;
  border-color: #343b4a;
  box-shadow: none;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-btn--ghost:hover {
  background: #252c3a;
  border-color: #4b5563;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__card {
  background: #181d27;
  border-color: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__card-title,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__field label,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__label {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__lead,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__name-note {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__input--readonly {
  background: #151922;
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__pill {
  background: rgba(105, 65, 245, 0.18);
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__modal-panel {
  background: #181d27;
  border-color: #2a3140;
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__modal-title {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-learner-profile__modal-text {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-announce-feed__item {
  background: #181d27;
  border-color: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-feed__title {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-feed__body,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-feed__date,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page .kmu7-announce-pagehead__lead {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui {
  --learner-card: #181d27;
  --learner-text: #e5e7eb;
  --learner-muted: #9ca3af;
  --learner-ink: #f3f4f6;
  --learner-border: #2a3140;
  --learner-accent-soft: rgba(180, 83, 9, 0.2);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-history-card,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card--dashboard {
  background: #181d27;
  border-color: #2a3140;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__title {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-history-card__meta,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__meta {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card--row .kmu7-history-card__thumb {
  border-color: #343b4a;
  background: #1c2230;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-badge--ok,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__head .kmu7-badge--ok {
  background: rgba(180, 83, 9, 0.22);
  color: #fbbf24;
  border-color: rgba(217, 119, 6, 0.35);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-badge--muted,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page.kmu7-learner-ui .kmu7-history-card__head .kmu7-badge--muted {
  background: #1c2230;
  color: #9ca3af;
  border-color: #343b4a;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__back {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__back:hover {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__chip--tag {
  background: rgba(105, 65, 245, 0.2);
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__chip--target {
  background: #1c2230;
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__outline-item {
  background: #1c2230;
  border-color: #2a3140;
  color: #d1d5db;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__outline-item:hover {
  background: #252c3a;
  border-color: #3a4150;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__outline-title {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__outline-index {
  background: rgba(105, 65, 245, 0.22);
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__outline-lock {
  color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__lockpill {
  background: rgba(180, 83, 9, 0.18);
  color: #fbbf24;
  border-color: rgba(217, 119, 6, 0.35);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__fact-label,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__rewards-label,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__notice {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__fact-value,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__fact-value--wrap {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__facts,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__rewards,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__sdgs {
  border-top-color: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__sdgs-label {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__sdg-item img {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__reward {
  background: #1c2230;
  border-color: #343b4a;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__reward-text {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__reward-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__reward-icon--cert {
  background: linear-gradient(145deg, rgba(180, 83, 9, 0.35), rgba(217, 119, 6, 0.22));
  color: #fbbf24;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__reward-icon--card {
  background: linear-gradient(145deg, rgba(21, 128, 61, 0.32), rgba(34, 197, 94, 0.18));
  color: #86efac;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__cta--ghost {
  background: #1c2230;
  color: #c4b5fd;
  border-color: #4c3d8f;
  box-shadow: none;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp__cta--ghost:hover {
  background: #252c3a;
  filter: none;
  box-shadow: none;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp-notfound__title {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-cdp-notfound__lead {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-alert--ok {
  background: rgba(180, 83, 9, 0.15);
  border-color: rgba(217, 119, 6, 0.35);
  color: #fbbf24;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learner-ui .kmu7-alert--error {
  background: rgba(190, 18, 60, 0.15);
  border-color: rgba(244, 114, 182, 0.25);
  color: #fda4af;
}

/* Legacy learner page skins (catalog / history / profile / preview) */
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-course-preview-page,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-profile-page,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-announcements-page {
  --text: #e5e7eb;
  --muted: #9ca3af;
  --surface: #181d27;
  --surface2: #1c2230;
  color: #e5e7eb;
  background: #0f1117;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-title,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-subtitle,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-lead,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-academos-pagehead__lead,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-course-preview-page .kmu7-academos-pagehead__lead,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-academos-pagehead__lead,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-profile-page .kmu7-academos-pagehead__lead {
  color: #c5cdd8;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-filters__icon {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-filters__search .kmu7-input::placeholder,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-input::placeholder {
  color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-filters__search .kmu7-input,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-input {
  background-color: #1c2230;
  background-image: none;
  border-color: #343b4a;
  color: #e5e7eb;
  box-shadow: none;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-select,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-filters__select.kmu7-select {
  background-color: #1c2230;
  border-color: #343b4a;
  color: #e5e7eb;
  box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%239ca3af' d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem 1.1rem;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-btn--ghost,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-course-preview-page .kmu7-btn--ghost,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-btn--ghost,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-profile-page .kmu7-btn--ghost {
  background: #1c2230;
  color: #e5e7eb;
  border-color: #343b4a;
  box-shadow: none;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-btn--ghost:hover,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-course-preview-page .kmu7-btn--ghost:hover,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-btn--ghost:hover,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-profile-page .kmu7-btn--ghost:hover {
  background: #252c3a;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-alert--ok,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-course-preview-page .kmu7-alert--ok,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-alert--ok,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-profile-page .kmu7-alert--ok {
  background: rgba(180, 83, 9, 0.15);
  border-color: rgba(217, 119, 6, 0.35);
  color: #fbbf24;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-catalog-page .kmu7-alert--error,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-course-preview-page .kmu7-alert--error,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-history-page .kmu7-alert--error,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-learning-profile-page .kmu7-alert--error {
  background: rgba(190, 18, 60, 0.15);
  border-color: rgba(244, 114, 182, 0.25);
  color: #fda4af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card__media--empty {
  background: #1c2230;
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-card__countdown {
  color: #fbbf24;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-academos-profile__sep {
  color: #4b5563;
}

/* Lesson page — overview hub + single lesson view */
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-lessonpage {
  --text: #e5e7eb;
  --muted: #9ca3af;
  color: #e5e7eb;
  background: #0f1117;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__crumbs a {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__crumbs a:hover {
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__title,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__title,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__blocktitle {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__progress-text,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__desc,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__empty {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__bar {
  background: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__card {
  background: #181d27;
  border-color: #2a3140;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__card:hover {
  border-color: #4c3d8f;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__item.is-done .kmu7-lessonhub__card {
  border-color: rgba(34, 197, 94, 0.35);
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.12) 0%, #181d27 55%);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__name,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__doc a {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__index {
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__item.is-done .kmu7-lessonhub__index,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__item.is-done .kmu7-lessonhub__action,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__state.is-done,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__alldone {
  color: #4ade80;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__state {
  color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__state::before {
  background: #4b5563;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__state.is-done::before {
  background: #22c55e;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__ic--video {
  color: #a78bfa;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__ic--docs {
  color: #60a5fa;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__action {
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonhub__posttest {
  border-top-color: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview {
  background: #181d27;
  border-color: #2a3140;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__eyebrow {
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessontabs {
  border-bottom-color: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessontabs__tab {
  color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessontabs__tab:hover {
  color: #d1d5db;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessontabs__tab.is-active {
  color: #c4b5fd;
  border-bottom-color: #8b5cf6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__doc a {
  background: #1c2230;
  border-color: #343b4a;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__doc a:hover {
  background: #252c3a;
  border-color: #4c3d8f;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__doc-icon {
  color: #a78bfa;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__doc-ext {
  color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__lockhint {
  color: #fbbf24;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__foot {
  border-top-color: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-lessonview__donebadge {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-modal__box {
  background: #181d27;
  border: 1px solid #2a3140;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-modal__icon {
  background: rgba(180, 83, 9, 0.18);
  color: #fbbf24;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-modal__text {
  color: #d1d5db;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-modal__box.kmu7-safety-picker-modal__box .kmu7-safety-picker-modal__cancel {
  background: #1c2230;
  color: #e5e7eb;
  border-color: #4b5563;
  box-shadow: none;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-modal__box.kmu7-safety-picker-modal__box .kmu7-safety-picker-modal__cancel:hover {
  background: #252c3a;
  border-color: #6b7280;
  color: #f9fafb;
}

/* Quiz page — intro / taking / result */
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-page.kmu7-quizpage {
  --text: #e5e7eb;
  --muted: #9ca3af;
  color: #e5e7eb;
  background: #0f1117;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__eyebrow {
  background: rgba(105, 65, 245, 0.2);
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__title,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__subtitle,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__qbody,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__title {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__lead,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__back,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__course,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__detail {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__back:hover {
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__alert {
  background: rgba(190, 18, 60, 0.15);
  border-color: rgba(244, 114, 182, 0.25);
  color: #fda4af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__panel,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__q,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__card {
  background: #181d27;
  border-color: #2a3140;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__facts li {
  background: #1c2230;
  border-color: #343b4a;
  color: #d1d5db;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizintro__facts svg {
  color: #a78bfa;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__timer {
  border-bottom-color: #343b4a;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__timer-label,
html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__answered {
  color: #9ca3af;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__timer-value {
  color: #f3f4f6;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__timer-track {
  background: #2a3140;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__gridbtn {
  background: #1c2230;
  border-color: #4b5563;
  color: #d1d5db;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__gridbtn:hover {
  border-color: #8b5cf6;
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__gridbtn.is-done {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.45);
  color: #4ade80;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__gridbtn.is-current {
  background: rgba(245, 165, 36, 0.15);
  border-color: rgba(245, 165, 36, 0.55);
  color: #fbbf24;
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.12);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__qnum {
  color: #c4b5fd;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__option {
  border-color: #343b4a;
  background: #1c2230;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__option:hover {
  border-color: #6d5bd0;
  background: #252c3a;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__option-mark {
  border-color: #6b7280;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__option-body {
  color: #e5e7eb;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__option:has(input:checked) {
  border-color: #8b5cf6;
  background: rgba(105, 65, 245, 0.18);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quiz__option:has(input:checked) .kmu7-quiz__option-mark {
  border-color: #a78bfa;
  background: radial-gradient(circle, #a78bfa 0 45%, transparent 52%);
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__card--pass .kmu7-quizresult__icon {
  color: #4ade80;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__card--fail .kmu7-quizresult__icon {
  color: #f87171;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__score {
  color: #a78bfa;
}

html.kmu7-theme-dark body.kmu7-portal-body .kmu7-quizresult__card--fail .kmu7-quizresult__score {
  color: #f87171;
}

.kmu7-safety-pending__title {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.kmu7-safety-pending__list {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.kmu7-safety-pending__item {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: 14px;
  background: rgba(255, 247, 237, 0.65);
}

.kmu7-safety-pending__item.is-focused {
  border-color: rgba(234, 88, 12, 0.45);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.kmu7-safety-pending__course {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.kmu7-safety-pending__form {
  display: grid;
  gap: 0.75rem;
}

.kmu7-safety-pending__field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.kmu7-reg-name-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.kmu7-reg-name-modal.is-hidden {
  display: none !important;
}

body.kmu7-reg-name-modal-open {
  overflow: hidden;
}

.kmu7-reg-name-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
}

.kmu7-reg-name-modal.kmu7-page,
.kmu7-reg-name-modal.kmu7-page button,
.kmu7-reg-name-modal.kmu7-page p {
  font-family: "DB Helvethaica X", "Sarabun", "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.kmu7-reg-name-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 24rem;
  padding: 1.75rem 1.6rem 1.5rem;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.35);
  text-align: center;
  animation: kmu7-modal-pop 0.16s ease-out;
}

.kmu7-reg-name-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #fff7ed;
  color: #ea580c;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

.kmu7-reg-name-modal__icon i {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
}

.kmu7-reg-name-modal__text {
  margin: 0 0 1.35rem;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.45;
  color: #1f2937;
}

/* ปุ่มให้ตรงกับหน้าลงทะเบียน (.kmu7-auth-page .kmu7-btn--primary) */
.kmu7-reg-name-modal.kmu7-page .kmu7-reg-name-modal__btn.kmu7-btn--primary {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0b1220 !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.35) !important;
  margin: 0 !important;
  width: 100%;
  padding: 0.675rem 1.1rem !important;
  font-family: "DB Helvethaica X", "Sarabun", "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.54rem !important;
  line-height: 1.1 !important;
  min-height: 0 !important;
  letter-spacing: 0.01em;
}

.kmu7-reg-name-modal.kmu7-page .kmu7-reg-name-modal__btn.kmu7-btn--primary:hover,
.kmu7-reg-name-modal.kmu7-page .kmu7-reg-name-modal__btn.kmu7-btn--primary:focus-visible {
  background: #f59e0b !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.35) !important;
  outline: none !important;
}

/* Email domain suggestions (register / signup) */
.kmu7-email-suggest-wrap {
  position: relative;
  z-index: 2;
}

.kmu7-email-suggest__list {
  position: absolute;
  top: calc(100% + 0.05rem);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border: 1px solid #e7e5e4;
  border-radius: 0.85rem;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

.kmu7-page button.kmu7-email-suggest__option,
.kmu7-email-suggest__option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.72rem 1rem;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  color: #1c1917;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.kmu7-page button.kmu7-email-suggest__option:hover,
.kmu7-page button.kmu7-email-suggest__option.is-active,
.kmu7-email-suggest__option:hover,
.kmu7-email-suggest__option.is-active {
  background: #fafaf9;
  color: #c94a12;
}

.kmu7-page button.kmu7-email-suggest__option:focus,
.kmu7-page button.kmu7-email-suggest__option:focus-visible,
.kmu7-email-suggest__option:focus,
.kmu7-email-suggest__option:focus-visible {
  outline: none;
  background: #fff7ed;
  color: #c94a12;
  box-shadow: inset 3px 0 0 #f26522;
}

/* Auth/register — กัน theme ทับปุ่ม dropdown */
.kmu7-page.kmu7-auth-page .kmu7-email-suggest__list {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.22) !important;
}

.kmu7-page.kmu7-auth-page button.kmu7-email-suggest__option {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #1c1917 !important;
  font-size: 1.22rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
}

.kmu7-page.kmu7-auth-page button.kmu7-email-suggest__option:hover,
.kmu7-page.kmu7-auth-page button.kmu7-email-suggest__option.is-active {
  background: #fff7ed !important;
  color: #c94a12 !important;
}

.kmu7-page.kmu7-auth-page button.kmu7-email-suggest__option:focus,
.kmu7-page.kmu7-auth-page button.kmu7-email-suggest__option:focus-visible {
  background: #fff7ed !important;
  color: #c94a12 !important;
  box-shadow: inset 3px 0 0 #f26522 !important;
  outline: none !important;
}

/* =====================================================================
   Lab pass lookup — หน้าตรวจสอบผู้ผ่านการอบรม (เจ้าหน้าที่ห้องแล็บ)
   ===================================================================== */
.kmu7-lab-lookup-page {
  --lab-brand: #f26522;
  --lab-brand-2: #ff7a3a;
  --lab-brand-deep: #c94a12;
  --lab-brand-soft: #fff4ec;
  --lab-brand-glow: rgba(242, 101, 34, 0.22);
  --lab-ink: #1c1917;
  --lab-muted: #78716c;
  --lab-line: #e7e5e4;
  --lab-fs: 1.2;
  margin: 0;
  min-height: 100vh;
  background: #fafaf9;
  color: var(--lab-ink);
  font-family: var(--font), "DB Helvethaica X", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(1rem * var(--lab-fs));
  -webkit-font-smoothing: antialiased;
}

.kmu7-lab-lookup {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: calc(1.25rem * var(--lab-fs)) calc(1.25rem * var(--lab-fs)) calc(1.25rem * var(--lab-fs));
}

.kmu7-lab-lookup__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 122, 58, 0.18), transparent 55%),
    radial-gradient(circle 420px at 100% 20%, rgba(242, 101, 34, 0.08), transparent 70%),
    radial-gradient(circle 360px at 0% 80%, rgba(251, 146, 60, 0.1), transparent 65%),
    linear-gradient(180deg, #fffaf5 0%, #fafaf9 45%, #f5f5f4 100%);
}

.kmu7-lab-lookup__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: min(calc(36rem * 1.4), calc(100vw - 1.5rem));
  margin: 0 auto;
}

.kmu7-lab-lookup__wrap--wide {
  max-width: min(calc(100vw - 1.5rem), 96rem);
}

.kmu7-lab-lookup__shell {
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(231, 229, 228, 0.9);
  border-radius: calc(1rem * var(--lab-fs));
  box-shadow:
    0 0 0 1px rgba(242, 101, 34, 0.05),
    0 12px 36px rgba(28, 25, 23, 0.07),
    0 4px 14px var(--lab-brand-glow);
  overflow: hidden;
}

.kmu7-lab-lookup__hero {
  text-align: center;
  padding: calc(1.25rem * var(--lab-fs)) calc(1.15rem * var(--lab-fs)) calc(1rem * var(--lab-fs));
  background: linear-gradient(180deg, #ffffff 0%, #fff9f5 100%);
  border-bottom: 1px solid var(--lab-line);
}

.kmu7-lab-lookup__brand-mark {
  width: calc(2.75rem * var(--lab-fs));
  height: calc(2.75rem * var(--lab-fs));
  margin: 0 auto calc(0.6rem * var(--lab-fs));
  border-radius: calc(0.75rem * var(--lab-fs));
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--lab-brand-2), var(--lab-brand));
  color: #ffffff;
  font-size: calc(1.15rem * var(--lab-fs));
  box-shadow: 0 8px 20px var(--lab-brand-glow);
}

.kmu7-lab-lookup__eyebrow {
  margin: 0;
  font-size: calc(0.72rem * var(--lab-fs));
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lab-brand);
}

.kmu7-lab-lookup__title {
  margin: calc(0.35rem * var(--lab-fs)) 0 0;
  font-size: calc(clamp(1.45rem, 3.5vw, 1.95rem) * var(--lab-fs));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lab-ink);
}

.kmu7-lab-lookup__lead {
  margin: calc(0.45rem * var(--lab-fs)) auto 0;
  max-width: 100%;
  font-size: calc(0.95rem * var(--lab-fs));
  line-height: 1.55;
  color: var(--lab-muted);
}

.kmu7-lab-lookup__main {
  padding: calc(1rem * var(--lab-fs)) calc(1.15rem * var(--lab-fs)) calc(1.1rem * var(--lab-fs));
}

.kmu7-lab-lookup__meta {
  margin: calc(0.75rem * var(--lab-fs)) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: calc(0.82rem * var(--lab-fs));
  color: #a8a29e;
}

.kmu7-lab-lookup__panel {
  padding: 0;
}

.kmu7-lab-lookup__tabs {
  display: flex;
  gap: 0;
  margin-bottom: calc(1rem * var(--lab-fs));
  border-bottom: 2px solid #f5f5f4;
}

.kmu7-lab-lookup__tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.4rem * var(--lab-fs));
  min-height: calc(2.65rem * var(--lab-fs));
  padding: calc(0.5rem * var(--lab-fs)) calc(0.45rem * var(--lab-fs));
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: calc(0.92rem * var(--lab-fs));
  font-weight: 700;
  color: #a8a29e;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.kmu7-lab-lookup__tab i {
  font-size: calc(0.95rem * var(--lab-fs));
  opacity: 0.85;
}

.kmu7-lab-lookup__tab:hover {
  color: var(--lab-brand-deep);
}

.kmu7-lab-lookup__tab.is-active {
  color: var(--lab-brand-deep);
  border-bottom-color: var(--lab-brand);
}

.kmu7-lab-lookup__tab.is-active i {
  color: var(--lab-brand);
  opacity: 1;
}

.kmu7-lab-lookup__form {
  display: flex;
  flex-direction: column;
  gap: calc(0.75rem * var(--lab-fs));
}

.kmu7-lab-lookup__form--unit {
  gap: calc(0.75rem * var(--lab-fs));
}

.kmu7-lab-lookup__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(0.65rem * var(--lab-fs));
}

.kmu7-lab-lookup__field {
  display: flex;
  flex-direction: column;
  gap: calc(0.4rem * var(--lab-fs));
  min-width: 0;
}

.kmu7-lab-lookup__label {
  font-size: calc(0.95rem * var(--lab-fs));
  font-weight: 700;
  color: var(--lab-ink);
}

.kmu7-lab-lookup__optional {
  font-weight: 500;
  color: #a8a29e;
}

.kmu7-lab-lookup__input-wrap {
  display: flex;
  align-items: center;
  gap: calc(0.5rem * var(--lab-fs));
  padding: 0 calc(0.75rem * var(--lab-fs));
  min-height: calc(2.65rem * var(--lab-fs));
  border: 1.5px solid var(--lab-line);
  border-radius: calc(0.65rem * var(--lab-fs));
  background: #fafaf9;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.kmu7-lab-lookup__input-wrap:focus-within {
  border-color: var(--lab-brand);
  box-shadow: 0 0 0 4px rgba(242, 101, 34, 0.12);
  background: #ffffff;
}

.kmu7-lab-lookup__input-wrap i {
  width: calc(1.65rem * var(--lab-fs));
  height: calc(1.65rem * var(--lab-fs));
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(0.4rem * var(--lab-fs));
  background: var(--lab-brand-soft);
  color: var(--lab-brand);
  font-size: calc(0.78rem * var(--lab-fs));
}

.kmu7-lab-lookup__input,
.kmu7-lab-lookup__select {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: calc(0.98rem * var(--lab-fs));
  color: var(--lab-ink);
  outline: none;
}

.kmu7-lab-lookup__select {
  min-height: calc(2.65rem * var(--lab-fs));
  padding: calc(0.5rem * var(--lab-fs)) calc(0.7rem * var(--lab-fs));
  border: 1.5px solid var(--lab-line);
  border-radius: calc(0.65rem * var(--lab-fs));
  background: #fafaf9;
}

.kmu7-lab-lookup__select:focus {
  border-color: var(--lab-brand);
  box-shadow: 0 0 0 4px rgba(242, 101, 34, 0.12);
  background: #ffffff;
}

.kmu7-lab-lookup__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.4rem * var(--lab-fs));
  width: fit-content;
  min-height: calc(2.65rem * var(--lab-fs));
  padding: calc(0.55rem * var(--lab-fs)) calc(1.15rem * var(--lab-fs));
  border: 0;
  border-radius: calc(0.65rem * var(--lab-fs));
  background: linear-gradient(135deg, var(--lab-brand-2) 0%, var(--lab-brand) 50%, var(--lab-brand-deep) 100%);
  color: #ffffff;
  font: inherit;
  font-size: calc(0.98rem * var(--lab-fs));
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--lab-brand-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.kmu7-lab-lookup__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(242, 101, 34, 0.32);
  filter: brightness(1.03);
}

.kmu7-lab-lookup__submit:active {
  transform: translateY(0);
}

.kmu7-lab-lookup__alert {
  margin-top: calc(1rem * var(--lab-fs));
  display: flex;
  align-items: flex-start;
  gap: calc(0.65rem * var(--lab-fs));
  padding: calc(0.95rem * var(--lab-fs)) calc(1.05rem * var(--lab-fs));
  border-radius: calc(0.85rem * var(--lab-fs));
  font-size: calc(0.98rem * var(--lab-fs));
  font-weight: 600;
  line-height: 1.45;
}

.kmu7-lab-lookup__alert-ico {
  flex: 0 0 auto;
  font-size: calc(1.1rem * var(--lab-fs));
  line-height: 1;
  margin-top: 0.1em;
}

.kmu7-lab-lookup__alert--warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.kmu7-lab-lookup__alert--warn .kmu7-lab-lookup__alert-ico {
  color: #d97706;
}

.kmu7-lab-lookup__alert--err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.kmu7-lab-lookup__results {
  margin-top: calc(1.25rem * var(--lab-fs));
}

.kmu7-lab-lookup__results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.65rem * var(--lab-fs));
  margin-bottom: calc(0.85rem * var(--lab-fs));
}

.kmu7-lab-lookup__results-title {
  margin: 0;
  font-size: calc(1.12rem * var(--lab-fs));
  font-weight: 800;
  color: var(--lab-ink);
}

.kmu7-lab-lookup__export {
  display: inline-flex;
  align-items: center;
  gap: calc(0.45rem * var(--lab-fs));
  min-height: calc(2.6rem * var(--lab-fs));
  padding: calc(0.5rem * var(--lab-fs)) calc(1rem * var(--lab-fs));
  border-radius: calc(0.65rem * var(--lab-fs));
  background: #ffffff;
  border: 1.5px solid rgba(242, 101, 34, 0.35);
  color: var(--lab-brand-deep);
  font-size: calc(0.95rem * var(--lab-fs));
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.kmu7-lab-lookup__export:hover {
  background: var(--lab-brand-soft);
  border-color: var(--lab-brand);
  transform: translateY(-1px);
}

.kmu7-lab-lookup__person {
  background: #fafaf9;
  border: 1px solid var(--lab-line);
  border-radius: calc(1rem * var(--lab-fs));
  overflow: hidden;
}

.kmu7-lab-lookup__person + .kmu7-lab-lookup__person {
  margin-top: calc(0.85rem * var(--lab-fs));
}

.kmu7-lab-lookup__person-head {
  display: flex;
  gap: calc(0.95rem * var(--lab-fs));
  padding: calc(1.05rem * var(--lab-fs));
  border-bottom: 1px solid var(--lab-line);
  background: #ffffff;
}

.kmu7-lab-lookup__avatar {
  width: calc(3.25rem * var(--lab-fs));
  height: calc(3.25rem * var(--lab-fs));
  border-radius: calc(0.85rem * var(--lab-fs));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--lab-brand-2), var(--lab-brand));
  color: #ffffff;
  font-size: calc(1.3rem * var(--lab-fs));
  flex: 0 0 auto;
  box-shadow: 0 8px 20px var(--lab-brand-glow);
}

.kmu7-lab-lookup__person-name {
  margin: 0;
  font-size: calc(1.22rem * var(--lab-fs));
  font-weight: 800;
  color: var(--lab-ink);
  line-height: 1.25;
}

.kmu7-lab-lookup__person-meta {
  margin: calc(0.5rem * var(--lab-fs)) 0 0;
  padding: 0;
  display: grid;
  gap: calc(0.3rem * var(--lab-fs));
}

.kmu7-lab-lookup__person-meta > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: calc(0.35rem * var(--lab-fs));
  min-width: 0;
}

.kmu7-lab-lookup__person-meta dt {
  margin: 0;
  font-size: calc(0.88rem * var(--lab-fs));
  color: var(--lab-muted);
}

.kmu7-lab-lookup__person-meta dd {
  margin: 0;
  font-size: calc(0.98rem * var(--lab-fs));
  font-weight: 600;
  color: var(--lab-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kmu7-lab-lookup__cards {
  padding: calc(0.75rem * var(--lab-fs)) calc(1rem * var(--lab-fs)) calc(1rem * var(--lab-fs));
  display: flex;
  flex-direction: column;
  gap: calc(0.65rem * var(--lab-fs));
}

.kmu7-lab-lookup__card-row {
  padding: calc(0.95rem * var(--lab-fs));
  border-radius: calc(0.75rem * var(--lab-fs));
  border: 1px solid var(--lab-line);
  background: #ffffff;
}

.kmu7-lab-lookup__card-row.is-valid {
  border-color: rgba(34, 197, 94, 0.4);
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.kmu7-lab-lookup__card-row.is-expired {
  border-color: rgba(242, 101, 34, 0.35);
  background: linear-gradient(180deg, var(--lab-brand-soft) 0%, #ffffff 100%);
}

.kmu7-lab-lookup__card-course strong {
  display: block;
  margin-top: calc(0.15rem * var(--lab-fs));
  font-size: calc(1.02rem * var(--lab-fs));
  line-height: 1.45;
  color: var(--lab-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kmu7-lab-lookup__card-grid {
  margin-top: calc(0.7rem * var(--lab-fs));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.65rem * var(--lab-fs)) calc(0.85rem * var(--lab-fs));
}

.kmu7-lab-lookup__card-grid > div {
  min-width: 0;
}

.kmu7-lab-lookup__card-grid > div > span:not(.kmu7-lab-lookup__card-label):not(.kmu7-lab-lookup__status) {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kmu7-lab-lookup__card-grid > div > code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kmu7-lab-lookup__card-label {
  display: block;
  font-size: calc(0.75rem * var(--lab-fs));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lab-muted);
}

.kmu7-lab-lookup__code {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-top: calc(0.15rem * var(--lab-fs));
  padding: calc(0.21rem * var(--lab-fs)) calc(0.63rem * var(--lab-fs));
  border-radius: calc(0.35rem * var(--lab-fs));
  background: var(--lab-brand-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(0.92rem * var(--lab-fs));
  font-weight: 600;
  color: var(--lab-brand-deep);
  word-break: break-all;
  overflow-wrap: anywhere;
}

.kmu7-lab-lookup__status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: calc(0.12rem * var(--lab-fs));
  padding: calc(0.25rem * var(--lab-fs)) calc(0.84rem * var(--lab-fs));
  border-radius: 999px;
  font-size: calc(0.85rem * var(--lab-fs));
  font-weight: 800;
}

.kmu7-lab-lookup__status--valid {
  background: #dcfce7;
  color: #166534;
}

.kmu7-lab-lookup__status--expired {
  background: #ffedd5;
  color: #9a3412;
}

.kmu7-lab-lookup__table-wrap {
  overflow: visible;
  border-radius: calc(0.85rem * var(--lab-fs));
  border: 1px solid var(--lab-line);
  background: #ffffff;
}

.kmu7-lab-lookup__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: calc(0.95rem * var(--lab-fs));
}

.kmu7-lab-lookup__table thead th {
  padding: calc(0.8rem * var(--lab-fs)) calc(0.75rem * var(--lab-fs));
  text-align: left;
  font-size: calc(0.78rem * var(--lab-fs));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lab-brand-deep);
  background: var(--lab-brand-soft);
  border-bottom: 1px solid rgba(242, 101, 34, 0.12);
  white-space: normal;
  line-height: 1.35;
  vertical-align: bottom;
}

.kmu7-lab-lookup__table th:nth-child(1),
.kmu7-lab-lookup__table td:nth-child(1) {
  width: 11%;
}

.kmu7-lab-lookup__table th:nth-child(2),
.kmu7-lab-lookup__table td:nth-child(2) {
  width: 9%;
}

.kmu7-lab-lookup__table th:nth-child(3),
.kmu7-lab-lookup__table td:nth-child(3) {
  width: 13%;
}

.kmu7-lab-lookup__table th:nth-child(4),
.kmu7-lab-lookup__table td:nth-child(4) {
  width: 32%;
}

.kmu7-lab-lookup__table th:nth-child(5),
.kmu7-lab-lookup__table td:nth-child(5) {
  width: 11%;
}

.kmu7-lab-lookup__table th:nth-child(6),
.kmu7-lab-lookup__table td:nth-child(6),
.kmu7-lab-lookup__table th:nth-child(7),
.kmu7-lab-lookup__table td:nth-child(7) {
  width: 8%;
}

.kmu7-lab-lookup__table th:nth-child(8),
.kmu7-lab-lookup__table td:nth-child(8) {
  width: 8%;
}

.kmu7-lab-lookup__table tbody td {
  padding: calc(0.75rem * var(--lab-fs)) calc(0.75rem * var(--lab-fs));
  border-bottom: 1px solid #f5f5f4;
  vertical-align: top;
  color: var(--lab-ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kmu7-lab-lookup__table td:nth-child(2),
.kmu7-lab-lookup__table td:nth-child(5) .kmu7-lab-lookup__code {
  word-break: normal;
  overflow-wrap: normal;
}

.kmu7-lab-lookup__table td:nth-child(5) .kmu7-lab-lookup__code {
  white-space: nowrap;
}

.kmu7-lab-lookup__table tbody tr:last-child td {
  border-bottom: 0;
}

.kmu7-lab-lookup__table tbody tr.is-expired td {
  background: #fffaf5;
}

.kmu7-lab-lookup__foot {
  margin-top: auto;
  padding: calc(1rem * var(--lab-fs)) calc(0.5rem * var(--lab-fs)) 0;
  text-align: center;
  font-size: calc(0.78rem * var(--lab-fs));
  color: #a8a29e;
  background: transparent;
  border: 0;
}

.kmu7-lab-lookup__foot p {
  margin: 0;
  line-height: 1.55;
}

@media (min-width: 960px) {
  .kmu7-lab-lookup {
    padding: calc(1.25rem * var(--lab-fs)) calc(1.25rem * var(--lab-fs)) calc(2rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__wrap {
    max-width: min(calc(38rem * 1.4), calc(100vw - 2rem));
  }

  .kmu7-lab-lookup__wrap--wide {
    max-width: min(calc(100vw - 2rem), 96rem);
  }

  .kmu7-lab-lookup__hero {
    padding: calc(1.15rem * var(--lab-fs)) calc(1.25rem * var(--lab-fs)) calc(0.95rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__main {
    padding: calc(1rem * var(--lab-fs)) calc(1.25rem * var(--lab-fs)) calc(1.15rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__form--person {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: calc(0.65rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__form--person .kmu7-lab-lookup__field {
    flex: 1 1 auto;
    min-width: 0;
  }

  .kmu7-lab-lookup__form--person .kmu7-lab-lookup__submit {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .kmu7-lab-lookup__form--unit {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: calc(0.65rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__form--unit .kmu7-lab-lookup__form-grid {
    flex: 1 1 16rem;
    min-width: 0;
  }

  .kmu7-lab-lookup__form--unit .kmu7-lab-lookup__submit {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .kmu7-lab-lookup__person-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(0.65rem * var(--lab-fs)) calc(1rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__person-meta > div {
    grid-template-columns: 1fr;
    gap: 0.12rem;
  }
}

@media (min-width: 1100px) {
  .kmu7-lab-lookup__card-grid {
    grid-template-columns: minmax(8.5rem, 1.35fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr) minmax(5rem, 0.85fr);
  }
}

@media (max-width: 959px) {
  .kmu7-lab-lookup__submit {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .kmu7-lab-lookup {
    padding: calc(0.85rem * var(--lab-fs)) calc(0.65rem * var(--lab-fs)) calc(1rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__shell {
    border-radius: calc(0.85rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__hero {
    padding: calc(1.1rem * var(--lab-fs)) calc(0.95rem * var(--lab-fs)) calc(0.85rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__main {
    padding: calc(0.85rem * var(--lab-fs)) calc(0.95rem * var(--lab-fs)) calc(0.95rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__tab span {
    font-size: calc(0.9rem * var(--lab-fs));
  }

  .kmu7-lab-lookup__form-grid {
    grid-template-columns: 1fr;
  }

  .kmu7-lab-lookup__person-meta > div {
    grid-template-columns: 1fr;
    gap: 0.08rem;
  }

  .kmu7-lab-lookup__card-grid {
    grid-template-columns: 1fr;
  }

  .kmu7-lab-lookup__table thead {
    display: none;
  }

  .kmu7-lab-lookup__table,
  .kmu7-lab-lookup__table tbody,
  .kmu7-lab-lookup__table tr,
  .kmu7-lab-lookup__table td {
    display: block;
    width: 100%;
  }

  .kmu7-lab-lookup__table tr {
    padding: calc(0.7rem * var(--lab-fs)) calc(0.85rem * var(--lab-fs));
    border-bottom: 1px solid var(--lab-line);
  }

  .kmu7-lab-lookup__table td {
    padding: calc(0.28rem * var(--lab-fs)) 0;
    border-bottom: 0;
  }

  .kmu7-lab-lookup__table td::before {
    content: attr(data-label) ": ";
    font-weight: 800;
    color: var(--lab-muted);
  }
}

/* --- Admin: bulk student ID lookup --- */
.kmu7-student-id-lookup-page .kmu7-student-id-lookup-upload,
.kmu7-student-id-lookup-page .kmu7-student-id-lookup-results {
  margin-top: 1rem;
}

.kmu7-student-id-lookup-page .kmu7-card__title {
  margin: 0 0 0.85rem;
  font-size: calc(1.15rem * 1.3);
  font-weight: 700;
  color: var(--kmu7-admin-ink);
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-form .kmu7-field label {
  font-size: calc(0.95rem * 1.3);
  font-weight: 700;
  color: var(--kmu7-admin-ink);
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-form .kmu7-hint {
  font-size: calc(0.88rem * 1.3);
  color: var(--kmu7-admin-ink-muted);
  line-height: 1.5;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-form input[type="file"] {
  font-size: calc(0.92rem * 1.3);
  color: var(--kmu7-admin-ink);
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-form__actions {
  margin-top: 1rem;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--kmu7-admin-line);
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-results__head-text {
  flex: 1 1 16rem;
  min-width: 0;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-export-form {
  margin: 0;
  flex: 0 0 auto;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-export-form .kmu7-btn {
  font-size: calc(0.92rem * 1.3);
  white-space: nowrap;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-results__head .kmu7-hint {
  font-size: calc(0.92rem * 1.3);
  color: var(--kmu7-admin-ink-muted);
  margin: 0.35rem 0 0;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-table {
  min-width: 1080px;
  font-size: calc(0.88rem * 1.3 * 1.15);
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-table th,
.kmu7-student-id-lookup-page .kmu7-student-id-lookup-table td {
  padding: calc(0.72rem * 1.15) calc(0.85rem * 1.15);
  line-height: 1.5;
  vertical-align: top;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: var(--kmu7-admin-brand-deep);
  font-weight: 800;
  border-bottom: 2px solid var(--kmu7-admin-brand-soft);
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-table tbody tr:nth-child(even) td {
  background: #fcfcfd;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-table tbody tr:hover td {
  background: #fff7f4;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-col-num {
  width: 3.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--kmu7-admin-ink-muted);
  white-space: nowrap;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-col-id {
  white-space: nowrap;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-code {
  display: inline-block;
  padding: 0.15em 0.45em;
  border-radius: 6px;
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
  font-size: 0.95em;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-name-link {
  color: var(--kmu7-admin-brand-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-name-link:hover {
  color: var(--kmu7-admin-brand);
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-email {
  margin-top: 0.35rem;
  font-size: 0.92em;
  color: var(--kmu7-admin-ink-muted);
  word-break: break-all;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-name-missing {
  color: var(--kmu7-admin-ink-muted);
  font-style: italic;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-col-courses,
.kmu7-student-id-lookup-page .kmu7-sid-lookup-col-notes,
.kmu7-student-id-lookup-page .kmu7-sid-lookup-col-safety {
  min-width: 14rem;
  max-width: 26rem;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-empty {
  color: var(--kmu7-admin-ink-muted);
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-note-badge {
  display: inline-block;
  padding: 0.45em 0.65em;
  border-radius: 8px;
  background: #fff4e8;
  border: 1px solid #ffd4b3;
  color: #9a3412;
  font-weight: 600;
  line-height: 1.45;
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-list {
  margin: 0;
  padding-left: 1.15rem;
  line-height: 1.5;
  color: var(--kmu7-admin-ink);
}

.kmu7-student-id-lookup-page .kmu7-student-id-lookup-list li + li {
  margin-top: 0.45rem;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-safety-none {
  color: var(--kmu7-admin-ink-muted);
  font-style: italic;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-safety-active {
  color: #166534;
  font-weight: 600;
}

.kmu7-student-id-lookup-page .kmu7-sid-lookup-safety-expired {
  color: #b91c1c;
  font-weight: 600;
}

.kmu7-student-id-lookup-page .kmu7-alert--error {
  margin-bottom: 1rem;
  font-size: calc(0.92rem * 1.3);
}
/* legacy_course_pass_import: ตารางอ้างอิง course_id ต้องอ่านได้ชัดบนธีมแอดมิน */
.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table {
  overflow-x: auto;
  background: #ffffff;
  border-color: #d9e1ea;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table {
  min-width: 720px;
  color: #172033;
  font-size: 1.1rem; /* 0.88rem เดิม × 1.25 */
}

.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table th {
  color: #334155;
  background: #eef3f8;
  border-bottom-color: #cbd5e1;
  font-weight: 800;
}

.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table td {
  color: #172033;
  background: #ffffff;
  border-bottom-color: #dbe3ec;
  line-height: 1.55;
}

.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table tbody tr:hover td {
  background: #fff3ed;
}

.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table th:nth-child(3),
.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table th:nth-child(4),
.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table td:nth-child(3),
.kmu7-admin-dashboard .kmu7-admin-lcp-import-ref-table .kmu7-admin-table td:nth-child(4) {
  width: 7rem;
  text-align: center;
}
/* ---------- Course reports: user-type statistics modal ---------- */
.kmu7-admin-dashboard .kmu7-course-report-stats-btn {
  width: auto;
  margin: 0;
  font-weight: 750;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-btn i {
  color: var(--kmu7-admin-brand);
}

.kmu7-admin-dashboard .kmu7-course-report-stats-modal__panel {
  width: min(100%, 760px);
  max-height: min(92vh, 820px);
}

.kmu7-admin-dashboard .kmu7-course-report-stats-modal__lead {
  margin: 0.35rem 0 0;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.88em;
  font-weight: 500;
  line-height: 1.4;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--kmu7-admin-line);
  border-radius: 12px;
  background: #ffffff;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96em;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-table th,
.kmu7-admin-dashboard .kmu7-course-report-stats-table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--kmu7-admin-line);
  text-align: left;
  vertical-align: middle;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-table thead th {
  background: #f8fafc;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.9em;
  font-weight: 800;
  white-space: nowrap;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-table tbody th {
  color: var(--kmu7-admin-ink);
  font-weight: 700;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-table td {
  color: var(--kmu7-admin-ink);
  font-size: 1.08em;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-table tfoot th,
.kmu7-admin-dashboard .kmu7-course-report-stats-table tfoot td {
  border-bottom: 0;
  background: var(--kmu7-admin-brand-soft);
  color: var(--kmu7-admin-brand-deep);
  font-weight: 850;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-modal__note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  color: var(--kmu7-admin-ink-muted);
  font-size: 0.82em;
  line-height: 1.45;
}

.kmu7-admin-dashboard .kmu7-course-report-stats-modal__note i {
  flex: 0 0 auto;
  margin-top: 0.15em;
  color: var(--kmu7-admin-brand);
}

@media (max-width: 560px) {
  .kmu7-admin-dashboard .kmu7-course-report-stats-table th,
  .kmu7-admin-dashboard .kmu7-course-report-stats-table td {
    padding: 0.65rem 0.55rem;
  }

  .kmu7-admin-dashboard .kmu7-course-report-stats-table {
    font-size: 0.86em;
  }
}