:root {
  --green-950: #092d62;
  --green-900: #0b4ca2;
  --green-800: #1768cf;
  --green-100: #e8f1ff;
  --green-50: #f3f7ff;
  --cream: #f7faff;
  --cream-2: #e8f0ff;
  --white: #ffffff;
  --ink: #14233e;
  --muted: #60708a;
  --line: #dce5f2;
  --danger: #a23d3d;
  --danger-bg: #fff0f0;
  --success: #13734d;
  --success-bg: #e8f8f0;
  --shadow: 0 22px 65px rgba(10, 55, 122, .13);
  --radius-lg: 26px;
  --radius-md: 17px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f5f7f5;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

a { color: var(--green-800); }

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.18), transparent 25%),
    linear-gradient(135deg, var(--green-950), var(--green-800));
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
}

.auth-story {
  min-height: 100vh;
  padding: clamp(34px, 5vw, 78px);
  color: white;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.auth-story::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  right: -180px;
  bottom: -180px;
  box-shadow: 0 0 0 65px rgba(255,255,255,.04), 0 0 0 130px rgba(255,255,255,.025);
}

.brand {
  display: inline-flex;
  gap: 13px;
  align-items: center;
  text-decoration: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--cream);
  color: var(--green-900);
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.brand small,
.brand strong {
  display: block;
}

.brand small {
  font-size: 11px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  opacity: .75;
}

.brand strong {
  margin-top: 2px;
  font-family: Georgia, serif;
  font-size: 20px;
}

.story-copy {
  max-width: 680px;
  margin: auto 0;
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 10px;
  color: #8fae9d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.auth-story .eyebrow { color: #c9ddcf; }

.story-copy h1 {
  max-width: 650px;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -2px;
}

.story-copy > p:last-child {
  max-width: 590px;
  margin: 26px 0 0;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,.76);
}

.story-note {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 13px;
  align-items: center;
  max-width: 430px;
  padding: 17px 20px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

.story-note span { font-size: 23px; }
.story-note p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.5; }

.auth-panel {
  background: var(--cream);
  min-height: 100vh;
  padding: 28px;
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(100%, 540px);
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(92, 81, 60, .12);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.auth-heading { margin-bottom: 30px; }

.auth-heading h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--green-950);
}

.auth-heading > p:last-child {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.form-stack {
  display: grid;
  gap: 20px;
}

.field {
  display: grid;
  gap: 8px;
}

.field > span {
  font-size: 14px;
  font-weight: 700;
  color: #35463d;
}

.field input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid #d8ddd8;
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  outline: none;
  transition: .18s ease;
}

.field input:focus {
  border-color: var(--green-800);
  box-shadow: 0 0 0 4px rgba(49,95,77,.12);
}

.field small { color: var(--muted); line-height: 1.5; }

.password-wrap { position: relative; }

.password-wrap input { padding-right: 105px; }

.password-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: var(--green-100);
  color: var(--green-900);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.otp-input {
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 12px;
  color: var(--green-900) !important;
}

.btn {
  min-height: 50px;
  border: 0;
  border-radius: 13px;
  padding: 0 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .55; }

.btn-primary {
  background: var(--green-900);
  color: white;
  box-shadow: 0 12px 28px rgba(36,77,61,.22);
}

.btn-ghost {
  background: transparent;
  color: var(--green-900);
  border: 1px solid #cad7ce;
}

.btn-block { width: 100%; }

.form-help {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
}

.form-help a { font-weight: 800; text-decoration: none; }

.alert {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: 13px;
  line-height: 1.55;
  font-size: 14px;
}

.alert-success {
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid #cbe7d4;
}

.alert-error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid #f0cccc;
}

.resend-form { margin-top: 13px; }
.muted { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* Admin dashboard */
.dashboard-page { background: #f3f6f3; }

.dashboard-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 275px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  background: var(--green-950);
  color: white;
}

.brand-sidebar { padding: 0 8px; }
.brand-sidebar .brand-mark { width: 43px; height: 43px; font-size: 23px; }
.brand-sidebar strong { font-size: 17px; }

.nav-list {
  display: grid;
  gap: 7px;
  margin-top: 46px;
}

.nav-list a {
  min-height: 48px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  border-radius: 13px;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-weight: 700;
}

.nav-list a.active {
  background: rgba(255,255,255,.12);
  color: white;
}

.nav-list a[aria-disabled="true"] { cursor: default; opacity: .72; }
.nav-list em { font-size: 9px; font-style: normal; text-transform: uppercase; letter-spacing: 1px; }

.sidebar-logout { margin-top: auto; }

.sidebar-logout button {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  cursor: pointer;
}

.dashboard-main {
  width: min(100%, 1600px);
  padding: 34px clamp(24px, 4vw, 62px) 60px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  margin-bottom: 30px;
}

.topbar h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: clamp(30px, 3vw, 44px);
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
}

.profile-chip > span {
  width: 41px;
  height: 41px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-900);
  font-weight: 900;
}

.profile-chip strong,
.profile-chip small { display: block; }
.profile-chip strong { font-size: 13px; }
.profile-chip small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.hero-card {
  min-height: 230px;
  padding: clamp(28px, 4vw, 50px);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.16), transparent 22%),
    linear-gradient(130deg, var(--green-950), var(--green-800));
  overflow: hidden;
}

.hero-card h2 {
  max-width: 720px;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 500;
}

.hero-card p:last-child {
  max-width: 800px;
  margin: 15px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}

.hero-orbit {
  min-width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 58px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 25px rgba(255,255,255,.05), 0 0 0 50px rgba(255,255,255,.025);
}

.stats-grid {
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}

.stat-card,
.content-card {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 9px 30px rgba(31,56,43,.055);
}

.stat-card { padding: 22px; }
.stat-card span, .stat-card small { display: block; }
.stat-card span { color: var(--muted); font-size: 13px; }
.stat-card strong {
  display: block;
  margin: 10px 0 4px;
  color: var(--green-950);
  font-family: Georgia, serif;
  font-size: 35px;
  font-weight: 500;
}
.stat-card small { color: #909a94; }

.content-card { padding: clamp(24px, 3vw, 36px); }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 22px;
}

.section-heading h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: 28px;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th, td {
  padding: 15px 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

td { font-size: 14px; }
td strong, td small { display: block; }
td small { margin-top: 4px; color: var(--muted); }

.status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #f0f2f0;
}

.status-active { color: var(--success); background: var(--success-bg); }

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}

.empty-state > span { font-size: 45px; }
.empty-state h3 { margin: 10px 0 7px; color: var(--ink); }
.empty-state p { margin: 0; }

/* Student */
.student-page { background: var(--green-50); }

.student-header {
  min-height: 82px;
  padding: 0 clamp(20px, 5vw, 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(15px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.student-header .brand { color: var(--ink); }

.student-main {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 55px 0 80px;
}

.student-welcome {
  padding: clamp(30px, 5vw, 58px);
  margin-bottom: 35px;
  border-radius: var(--radius-lg);
  color: white;
  background: linear-gradient(130deg, var(--green-950), var(--green-800));
}

.student-welcome h1 {
  max-width: 800px;
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.08;
}

.student-welcome > p:last-child {
  max-width: 670px;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.course-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: white;
  border-radius: 21px;
  box-shadow: 0 15px 40px rgba(29,59,45,.08);
}

.course-cover {
  min-height: 185px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 72% 25%, rgba(255,255,255,.3), transparent 20%),
    linear-gradient(135deg, #b8d0bf, #e4ddc9);
}

.course-cover span { font-size: 70px; }
.course-cover img { width: 100%; height: 185px; object-fit: cover; }

.course-body { padding: 24px; }
.course-body > small { color: var(--green-800); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.course-body h3 { margin: 8px 0 10px; font-family: Georgia, serif; font-size: 25px; font-weight: 500; }
.course-body p { min-height: 70px; color: var(--muted); line-height: 1.6; }

.progress-row {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 8px;
  color: var(--muted);
  font-size: 12px;
}

.progress-row strong { color: var(--green-900); }

.progress-track {
  height: 8px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #e6ece7;
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green-800);
}

@media (max-width: 1150px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-story { display: none; }
  .auth-panel { padding: 18px; }
  .auth-card { padding: 30px 22px; }

  .dashboard-shell { display: block; }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 16px 20px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .nav-list { display: none; }
  .sidebar-logout { margin: 0; }
  .sidebar-logout button { padding: 0 14px; }
  .dashboard-main { padding: 24px 18px 45px; }
  .profile-chip { display: none; }
  .hero-orbit { display: none; }
}

@media (max-width: 680px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card:last-child { grid-column: 1 / -1; }
  .topbar { align-items: flex-start; }
  .hero-card { min-height: 0; }
  .course-grid { grid-template-columns: 1fr; }
  .student-header { padding: 0 16px; }
  .student-main { width: min(100% - 28px, 1240px); padding-top: 28px; }
  .student-header .brand small { display: none; }
  .student-header .brand strong { font-size: 15px; }
  .form-help { flex-direction: column; gap: 7px; }
}

/* ===== Tahap 2: Branding, peserta, dan impor Excel ===== */
.brand-logo {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.brand-sidebar .brand-logo { width: 44px; height: 44px; flex-basis: 44px; }
.auth-story { isolation: isolate; }
.auth-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20,52,40,.98) 0%, rgba(28,67,52,.88) 46%, rgba(36,77,61,.18) 100%);
}
.auth-hero-image {
  position: absolute;
  z-index: -2;
  width: min(92%, 900px);
  max-height: 72vh;
  right: -8%;
  bottom: -2%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 25px 45px rgba(0,0,0,.22));
}

.auth-story::before {
  background: linear-gradient(90deg, rgba(9,45,98,.98) 0%, rgba(11,76,162,.9) 48%, rgba(23,104,207,.22) 100%);
}
.story-copy { max-width: 55%; margin: auto 0; }
.story-copy h1 { font-size: clamp(39px, 4.4vw, 66px); }
.story-copy > p:last-child { font-size: 16px; }
.story-note { max-width: 390px; }

.profile-chip > img {
  width: 41px;
  height: 41px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 50%;
}
.hero-branded { position: relative; min-height: 300px; padding-right: min(43vw, 650px); }
.hero-copy { position: relative; z-index: 2; }
.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 24px; }
.btn-light { background: var(--cream); color: var(--green-950); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.btn-outline-light { color: white; border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.08); }
.dashboard-hero-image {
  position: absolute;
  right: -2%;
  bottom: -7%;
  width: min(48%, 690px);
  max-height: 112%;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 25px 40px rgba(0,0,0,.22));
}

.btn-small { min-height: 40px; padding: 0 14px; font-size: 13px; }
.space-top { margin-top: 24px; }
.two-column-admin { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 22px; }
.form-card .section-heading { margin-bottom: 26px; }
.admin-form { display: grid; gap: 18px; }
.admin-form select,
.search-form input {
  width: 100%; min-height: 54px; padding: 0 16px;
  border: 1px solid #d8ddd8; border-radius: 13px;
  background: white; color: var(--ink); outline: none;
}
.admin-form select:focus,
.search-form input:focus { border-color: var(--green-800); box-shadow: 0 0 0 4px rgba(49,95,77,.12); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green-800); }
.quick-guide h2 { margin: 0 0 22px; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.soft-steps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 18px; }
.soft-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.soft-steps li > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--green-100); color: var(--green-900); font-weight: 900; }
.soft-steps strong { display: block; margin-bottom: 4px; }
.soft-steps p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

.credential-card,
.import-result {
  margin-bottom: 24px; padding: 26px 28px; border-radius: var(--radius-md);
  border: 1px solid #cfe3d4; background: linear-gradient(135deg, #eef7f0, #fffaf1);
  box-shadow: 0 12px 34px rgba(36,77,61,.08);
}
.credential-card { display: grid; grid-template-columns: 1fr minmax(360px, .9fr); gap: 25px; align-items: center; }
.credential-card h2,
.import-result h2 { margin: 0; font-family: Georgia, serif; font-weight: 500; font-size: 30px; }
.credential-card p,
.import-result p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.credential-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.credential-grid > div { padding: 15px; border-radius: 13px; background: rgba(255,255,255,.82); border: 1px solid var(--line); }
.credential-grid small, .credential-grid strong { display: block; }
.credential-grid small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.credential-grid strong { margin: 7px 0 10px; font-size: 16px; word-break: break-all; }
.credential-grid button { border: 0; background: none; color: var(--green-800); padding: 0; font-weight: 800; cursor: pointer; }

.search-form { display: flex; gap: 9px; width: min(100%, 430px); }
.search-form input { min-height: 40px; }
.row-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.link-button { border: 0; padding: 0; background: none; color: var(--green-800); font-weight: 800; font-size: 12px; cursor: pointer; }
.participant-course-editor { position: relative; }
.participant-course-editor summary { color: var(--green-800); font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.participant-course-editor summary::-webkit-details-marker { display: none; }
.participant-course-editor summary::after { content: '⌄'; margin-left: 5px; }
.participant-course-editor[open] summary::after { content: '⌃'; }
.participant-course-editor > p { max-width: 260px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.participant-course-form { display: grid; gap: 9px; width: min(300px, 72vw); margin-top: 10px; padding: 12px; border: 1px solid #cfe2d4; border-radius: 13px; background: #f5faf6; }
.participant-course-form label { display: grid; gap: 5px; color: var(--green-950); font-size: 11px; font-weight: 800; }
.participant-course-form label small { color: var(--muted); font-weight: 500; }
.participant-course-form select, .participant-course-form input { width: 100%; min-height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; }
.participant-course-form .btn { justify-self: start; min-height: 38px; }
.danger-link { color: var(--danger); }
.status-inactive { color: #7a5c24; background: #fff5d9; }

.import-columns { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr); }
.upload-zone {
  min-height: 190px; padding: 28px; display: grid; place-items: center; align-content: center; gap: 8px;
  border: 2px dashed #b9cdbf; border-radius: 18px; background: #f7fbf8; text-align: center; cursor: pointer;
}
.upload-zone:hover { border-color: var(--green-800); background: #eff7f1; }
.upload-zone input { width: 1px; height: 1px; opacity: 0; position: absolute; }
.upload-zone span { font-size: 42px; }
.upload-zone strong { font-size: 17px; }
.upload-zone small { color: var(--muted); }
.column-list { display: grid; gap: 10px; margin-bottom: 22px; }
.column-list span { display: flex; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--green-50); border: 1px solid #dce9df; }
.column-list b { color: var(--green-800); font-size: 11px; text-transform: uppercase; }
.soft-note { padding: 14px 16px; border-radius: 13px; background: var(--cream); color: var(--muted); line-height: 1.6; }
.import-result { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.import-result details { width: 100%; padding-top: 12px; border-top: 1px solid #d6e5d9; }
.import-result summary { color: var(--green-800); font-weight: 800; cursor: pointer; }
.import-result li { margin: 7px 0; color: var(--muted); }

.branded-welcome { position: relative; min-height: 315px; overflow: hidden; padding-right: min(45vw, 580px); }
.branded-welcome > div { position: relative; z-index: 2; }
.branded-welcome > img { position: absolute; right: -2%; bottom: -8%; width: min(48%, 610px); max-height: 115%; object-fit: contain; object-position: right bottom; }

@media (max-width: 1150px) {
  .story-copy { max-width: 68%; }
  .auth-hero-image { opacity: .62; right: -16%; }
  .hero-branded { padding-right: 38%; }
  .dashboard-hero-image { width: 44%; opacity: .86; }
  .credential-card { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .brand-sidebar .brand-logo { width: 42px; height: 42px; }
  .hero-branded { padding-right: 28px; }
  .dashboard-hero-image { display: none; }
  .two-column-admin, .import-columns { grid-template-columns: 1fr; }
  .branded-welcome { padding-right: 30px; }
  .branded-welcome > img { opacity: .25; width: 70%; }
}
@media (max-width: 680px) {
  .form-grid-2, .credential-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; gap: 14px; flex-direction: column; }
  .search-form { width: 100%; }
  .credential-card, .import-result { padding: 22px 18px; }
  .branded-welcome > img { display: none; }
}
.mobile-admin-nav { display: none; }
@media (max-width: 900px) {
  .mobile-admin-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 22px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .mobile-admin-nav::-webkit-scrollbar { display: none; }
  .mobile-admin-nav a {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: white;
    color: var(--green-900);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
  }
  .mobile-admin-nav a.active { background: var(--green-900); color: white; border-color: var(--green-900); }
}

/* ===== Tahap 3: Kelas, modul, materi, dan progress ===== */
.field textarea { width:100%; padding:15px 16px; border:1px solid #d8ddd8; border-radius:13px; background:#fff; color:var(--ink); outline:none; resize:vertical; font:inherit; line-height:1.6; }
.field textarea:focus { border-color:var(--green-800); box-shadow:0 0 0 4px rgba(49,95,77,.12); }
.course-admin-grid { align-items:start; }
.admin-course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.admin-course-card { overflow:hidden; border-radius:var(--radius-md); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.admin-course-cover { position:relative; aspect-ratio:1 / 1; height:auto; background:var(--green-100); overflow:hidden; }
.admin-course-cover img { width:100%; height:100%; object-fit:cover; }
.admin-course-cover .status { position:absolute; top:14px; right:14px; }
.admin-course-body { padding:22px; }
.admin-course-body h3 { margin:0 0 10px; font-family:Georgia,serif; font-size:27px; font-weight:500; }
.admin-course-body p { min-height:48px; margin:0 0 18px; color:var(--muted); line-height:1.55; }
.course-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px; }
.course-metrics span { padding:10px 6px; border-radius:11px; background:var(--green-50); text-align:center; color:var(--muted); font-size:11px; }
.course-metrics b { display:block; color:var(--green-950); font-size:18px; }
.course-editor-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.back-link { color:var(--green-800); font-weight:800; text-decoration:none; }
.course-editor-columns { grid-template-columns:minmax(0,1.15fr) minmax(330px,.75fr); align-items:stretch; }
.course-preview-card { overflow:hidden; padding:0; }
.course-preview-card img { width:100%; height:220px; object-fit:cover; background:var(--green-100); }
.course-preview-card div { padding:22px; }
.course-preview-card h2 { margin:0 0 9px; font-family:Georgia,serif; font-weight:500; }
.course-preview-card p:last-child { color:var(--muted); line-height:1.6; }
.soft-badge { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border-radius:999px; background:var(--green-50); border:1px solid #d8e9dc; color:var(--green-900); font-size:12px; font-weight:800; }
.inline-create-form { display:flex; gap:10px; margin:0 0 24px; }
.inline-create-form input { flex:1; min-width:0; min-height:48px; padding:0 15px; border:1px solid #d8ddd8; border-radius:12px; font:inherit; outline:none; }
.inline-create-form input:focus { border-color:var(--green-800); box-shadow:0 0 0 4px rgba(49,95,77,.1); }
.module-stack { display:grid; gap:18px; }
.module-panel { border:1px solid #dce5de; border-radius:17px; overflow:hidden; background:#fcfdfc; }
.module-panel-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; background:var(--green-50); border-bottom:1px solid #dce5de; }
.module-title-form { flex:1; display:grid; grid-template-columns:60px minmax(0,1fr) auto; gap:9px; align-items:center; }
.module-title-form input { min-height:40px; padding:0 11px; border:1px solid #cad8ce; border-radius:10px; background:#fff; font:inherit; }
.lesson-admin-list { padding:8px 18px; }
.lesson-admin-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid #e8ece9; }
.lesson-admin-row:last-child { border-bottom:0; }
.lesson-order { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--cream); color:var(--green-900); font-weight:900; }
.lesson-admin-row strong,.lesson-admin-row small { display:block; }
.lesson-admin-row small { margin-top:4px; color:var(--muted); font-size:12px; }
.lesson-create-form { margin:0; padding:14px 18px 18px; border-top:1px solid #e8ece9; }
.module-empty { margin:12px 0; color:var(--muted); }
.mini-progress { width:130px; height:8px; overflow:hidden; border-radius:999px; background:#e5ebe6; }
.mini-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--green-800),#86a64d); }
.lesson-editor-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.55fr); gap:22px; align-items:start; }
.editor-actions { display:flex; gap:10px; flex-wrap:wrap; }
.lesson-editor-help { position:sticky; top:24px; }
.lesson-editor-help h2 { margin:0 0 22px; font:500 30px Georgia,serif; }
.help-block { padding:15px 0; border-bottom:1px solid var(--line); }
.help-block p { margin:5px 0 0; color:var(--muted); line-height:1.55; }
.btn-danger-outline { border:1px solid #d7a9a9; background:#fff9f9; color:#a43d3d; }
.lesson-editor-help form { margin-top:24px; }

.learning-page { margin:0; background:#eef2ee; color:var(--ink); min-height:100vh; }
.learning-header { position:sticky; top:0; z-index:40; height:78px; padding:0 24px; display:grid; grid-template-columns:260px minmax(0,1fr) auto; gap:22px; align-items:center; background:#fff; border-bottom:1px solid #dfe7e1; box-shadow:0 8px 25px rgba(27,59,46,.05); }
.learning-header .brand { color:var(--green-950); text-decoration:none; }
.learning-header .brand-logo { width:44px; height:44px; flex-basis:44px; }
.learning-course-title { display:grid; grid-template-columns:auto minmax(120px,320px) auto; gap:12px; align-items:center; justify-content:end; color:var(--muted); }
.learning-course-title small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.learning-course-title b { color:var(--green-900); }
.learning-progress { height:8px; border-radius:999px; background:#e3eae4; overflow:hidden; }
.learning-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--green-800),#8aa650); }
.mobile-curriculum-toggle { display:none; min-height:40px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--green-900); font-weight:800; }
.learning-shell { display:grid; grid-template-columns:330px minmax(0,1fr); min-height:calc(100vh - 78px); }
.curriculum-sidebar { position:sticky; top:78px; height:calc(100vh - 78px); overflow-y:auto; background:#173f31; color:#fff; }
.curriculum-top { padding:28px 24px 22px; border-bottom:1px solid rgba(255,255,255,.12); }
.curriculum-top a { color:#d8eadf; text-decoration:none; font-size:13px; font-weight:800; }
.curriculum-top h2 { margin:17px 0 8px; font:500 26px Georgia,serif; }
.curriculum-top p { margin:0; color:#b9cec2; font-size:13px; }
.curriculum-nav { padding:14px 0 28px; }
.curriculum-nav section h3 { margin:0; padding:18px 22px 8px; color:#a9c5b6; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; }
.curriculum-nav a { display:grid; grid-template-columns:26px 1fr; gap:10px; align-items:start; padding:11px 22px; color:#e9f1ec; text-decoration:none; line-height:1.35; font-size:14px; border-left:3px solid transparent; }
.curriculum-nav a:hover,.curriculum-nav a.active { background:rgba(255,255,255,.1); border-left-color:#b7d36a; color:#fff; }
.lesson-check { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; color:#bad0c3; font-weight:900; }
.lesson-check.done { background:#b7d36a; color:#173f31; }
.lesson-main { min-width:0; padding:34px; }
.lesson-main > .alert { max-width:1000px; margin:0 auto 18px; }
.lesson-card { max-width:1000px; margin:0 auto; overflow:hidden; border:1px solid #dfe6e1; border-radius:22px; background:#fff; box-shadow:0 20px 60px rgba(31,66,52,.09); }
.lesson-video { aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; background:#102c22; color:#fff; }
.lesson-video iframe,.lesson-video video { width:100%; height:100%; border:0; background:#000; }
.lesson-video > div { text-align:center; padding:28px; }
.lesson-video > div > span { font-size:44px; }
.lesson-video h3 { margin:12px 0 14px; font:500 27px Georgia,serif; }
.lesson-video p { color:#c7d8ce; }
.video-empty { background:linear-gradient(135deg,#173f31,#356b55); }
.lesson-content { padding:38px 44px 24px; }
.lesson-content h1 { margin:7px 0 22px; font:500 clamp(34px,4.5vw,52px) Georgia,serif; line-height:1.08; color:var(--green-950); }
.lesson-prose { color:#45574e; font-size:17px; line-height:1.85; }
.lesson-prose a { color:var(--green-800); font-weight:800; overflow-wrap:anywhere; }
.lesson-completion { padding:12px 44px 34px; }
.btn-complete { min-height:58px; padding:0 25px; font-size:16px; }
.completed-note { display:flex; align-items:center; gap:14px; padding:17px 19px; border-radius:15px; background:#eef8f0; border:1px solid #cfe4d4; }
.completed-note > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--green-800); color:#fff; font-size:22px; }
.completed-note p { margin:4px 0 0; color:var(--muted); }
.lesson-pagination { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); background:#fafbf9; }
.lesson-pagination a { min-height:92px; padding:22px 30px; display:flex; flex-direction:column; justify-content:center; color:var(--green-950); text-decoration:none; }
.lesson-pagination a:hover { background:var(--green-50); }
.lesson-pagination a.next { text-align:right; border-left:1px solid var(--line); }
.lesson-pagination small { color:var(--muted); margin-bottom:5px; }

@media(max-width:1150px){.admin-course-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.learning-shell{grid-template-columns:290px minmax(0,1fr);}.learning-header{grid-template-columns:240px minmax(0,1fr) auto;}}
@media(max-width:900px){.admin-course-grid{grid-template-columns:1fr 1fr}.course-editor-columns,.lesson-editor-grid{grid-template-columns:1fr}.lesson-editor-help{position:static}.learning-header{grid-template-columns:1fr auto;height:70px;padding:0 16px}.learning-course-title{display:none}.mobile-curriculum-toggle{display:block}.learning-shell{display:block;min-height:calc(100vh - 70px)}.curriculum-sidebar{position:fixed;z-index:35;top:70px;left:0;bottom:0;width:min(88vw,340px);height:auto;transform:translateX(-105%);transition:transform .24s ease;box-shadow:20px 0 40px rgba(0,0,0,.2)}.curriculum-sidebar.open{transform:translateX(0)}.lesson-main{padding:22px 14px}.lesson-content{padding:30px 25px 18px}.lesson-completion{padding:10px 25px 28px}}
@media(max-width:680px){.admin-course-grid{grid-template-columns:1fr}.inline-create-form{flex-direction:column}.module-panel-head{align-items:flex-start;flex-direction:column}.module-title-form{width:100%;grid-template-columns:52px minmax(0,1fr)}.module-title-form .link-button{grid-column:1/-1;justify-self:start}.lesson-admin-row{grid-template-columns:32px minmax(0,1fr)}.lesson-admin-row .btn{grid-column:2}.course-editor-head{align-items:flex-start}.lesson-content h1{font-size:36px}.lesson-prose{font-size:16px}.lesson-pagination a{padding:18px 17px;min-height:84px}.lesson-pagination strong{font-size:13px}.lesson-video{aspect-ratio:4/3}}

/* ===== Tahap 4: tugas, penilaian, dan diskusi ===== */
.section-description{margin:8px 0 0;color:var(--muted);line-height:1.6;max-width:720px}.assignment-builder{overflow:hidden}.assignment-admin-list{display:grid;gap:18px}.assignment-admin-card{padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#fbfcfa)}.assignment-admin-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.assignment-admin-head strong,.assignment-admin-head small{display:block}.assignment-admin-head strong{font:500 24px Georgia,serif;color:var(--green-950)}.assignment-admin-head small{margin-top:6px;color:var(--muted)}.compact-form{gap:14px}.assignment-admin-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}.create-assignment-panel{margin-top:20px;border:1px dashed #b8ccbe;border-radius:17px;background:#f6faf7;overflow:hidden}.create-assignment-panel summary{padding:18px 20px;color:var(--green-900);font-weight:900;cursor:pointer}.create-assignment-panel[open] summary{border-bottom:1px solid #d9e7dc}.create-assignment-panel .admin-form{padding:22px}.compact-empty{padding:34px 20px}.status-pending{background:#fff4d6;color:#775c17}.status-revision{background:#fff0e8;color:#914c25}.status-reviewed{background:#e9f1ff;color:#2b5d91}

.assignment-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:240px}.assignment-hero>div{max-width:780px}.assignment-hero h2{max-width:780px}.assignment-hero-icon{width:120px;height:120px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:60px}.assignment-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.task-filter{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.task-filter select{min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink)}.submission-list{display:grid;gap:20px}.submission-card{border:1px solid var(--line);border-radius:19px;background:#fff;overflow:hidden;box-shadow:0 10px 30px rgba(36,77,61,.05)}.submission-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;background:#fafcf9;border-bottom:1px solid var(--line)}.student-mini-profile{display:flex;align-items:center;gap:12px}.student-mini-profile>span{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--green-100);color:var(--green-900);font-weight:900}.student-mini-profile strong,.student-mini-profile small{display:block}.student-mini-profile small{margin-top:3px;color:var(--muted)}.submission-context{display:grid;gap:5px;padding:20px 22px 10px}.submission-context>span,.submission-context small{color:var(--muted)}.submission-answer{padding:6px 22px 22px}.submission-answer p{margin:0 0 14px;line-height:1.75;color:#43544b;white-space:normal}.muted-text{color:var(--muted)!important;font-style:italic}.file-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:10px 13px;border-radius:999px;background:var(--green-50);border:1px solid #d4e5d8;color:var(--green-900);font-weight:800;text-decoration:none;overflow-wrap:anywhere}.review-form{display:grid;gap:14px;padding:20px 22px;background:#f8faf7;border-top:1px solid var(--line)}.discussion-admin-section{overflow:hidden}.admin-discussion-list{display:grid;gap:16px}.admin-discussion-card{padding:20px;border:1px solid var(--line);border-radius:17px;background:#fff}.admin-discussion-card.is-hidden{opacity:.68;background:#faf8f5}.discussion-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.discussion-meta strong,.discussion-meta small{display:block}.discussion-meta small{margin-top:5px;color:var(--muted)}.discussion-body{margin:16px 0;line-height:1.75;color:#3e5047}.admin-replies{display:grid;gap:10px;margin:14px 0;padding-left:18px;border-left:3px solid #cde0d2}.admin-replies>div{padding:12px 14px;border-radius:13px;background:#f5faf6}.admin-replies p{margin:5px 0;line-height:1.6}.admin-replies small{color:var(--muted)}.discussion-reply-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:15px}.discussion-reply-form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:13px;resize:vertical}.comment-toggle-form{margin-top:10px}

.student-assignment-section,.lesson-discussion{padding:28px 44px 34px;border-top:1px solid var(--line);background:#fbfcfa}.lesson-section-title{margin-bottom:22px}.lesson-section-title h2{margin:5px 0 8px;font:500 32px Georgia,serif;color:var(--green-950)}.lesson-section-title>p:last-child{margin:0;color:var(--muted);line-height:1.65}.student-assignment-list{display:grid;gap:18px}.student-assignment-card{padding:22px;border:1px solid #dbe5dd;border-radius:18px;background:#fff}.student-assignment-card>header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.student-assignment-card h3{margin:0 0 6px;font:500 26px Georgia,serif;color:var(--green-950)}.student-assignment-card header small{color:var(--muted)}.assignment-instructions{margin:18px 0;padding:15px 17px;border-radius:14px;background:#f4f8f5;color:#405249;line-height:1.75}.teacher-feedback{display:flex;gap:12px;margin:16px 0;padding:16px;border-radius:15px;background:#fff8e8;border:1px solid #ead9ab}.teacher-feedback>span{font-size:26px}.teacher-feedback p{margin:5px 0 0;line-height:1.65;color:#5f5438}.accepted-assignment-note{display:flex;gap:13px;align-items:center;margin-top:16px;padding:16px;border-radius:15px;background:#edf8ef;border:1px solid #c9dfcf}.accepted-assignment-note>span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--green-800);color:#fff;font-weight:900}.accepted-assignment-note p{margin:4px 0 0;color:var(--muted)}.student-assignment-form{display:grid;gap:14px;margin-top:18px}.student-assignment-form label>span,.student-comment-form label>span{display:block;margin-bottom:7px;font-weight:800;color:var(--green-950)}.student-assignment-form textarea,.student-comment-form textarea{width:100%;padding:14px 15px;border:1px solid #d5ded7;border-radius:14px;resize:vertical;outline:none}.student-assignment-form textarea:focus,.student-comment-form textarea:focus{border-color:var(--green-800);box-shadow:0 0 0 4px rgba(49,95,77,.1)}.student-upload-zone{position:relative;min-height:115px;padding:20px;display:grid;place-items:center;align-content:center;text-align:center;border:2px dashed #b8cdbd;border-radius:15px;background:#f7fbf8;cursor:pointer}.student-upload-zone input{position:absolute;width:1px;height:1px;opacity:0}.student-upload-zone>span{font-size:30px}.student-upload-zone strong{margin:5px 0}.student-upload-zone small{color:var(--muted)}.completion-hint{display:block;margin-top:10px;color:var(--muted);line-height:1.5}.lesson-discussion{background:#fff}.student-discussion-list{display:grid;gap:18px}.discussion-empty{display:flex;gap:12px;align-items:center;padding:18px;border:1px dashed #c8d8cc;border-radius:15px;color:var(--muted);background:#f9fbf9}.discussion-empty span{font-size:26px}.discussion-empty p{margin:0}.student-comment{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px}.comment-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--green-100);color:var(--green-900);font-weight:900}.comment-body{padding:15px 17px;border-radius:0 16px 16px 16px;background:#f4f8f5}.comment-body header{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.comment-body header span{padding:3px 8px;border-radius:999px;background:var(--green-800);color:#fff;font-size:10px;font-weight:900}.comment-body header small{margin-left:auto;color:var(--muted)}.comment-body>p{margin:9px 0 0;line-height:1.7;color:#3f5148}.comment-replies{display:grid;gap:10px;margin-top:14px;padding-left:14px;border-left:3px solid #bcd3c2}.comment-reply{padding:12px 13px;border-radius:12px;background:#fff}.comment-reply p{margin:5px 0;line-height:1.6}.comment-reply small{color:var(--muted)}.student-comment-form{display:grid;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}

@media(max-width:1050px){.assignment-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.assignment-hero-icon{width:90px;height:90px;font-size:44px}.discussion-reply-form{grid-template-columns:1fr}.discussion-reply-form .btn{justify-self:start}}
@media(max-width:680px){.assignment-admin-head,.submission-head,.student-assignment-card>header,.discussion-meta{flex-direction:column;align-items:flex-start}.assignment-hero-icon{display:none}.assignment-stats{grid-template-columns:1fr 1fr}.task-filter{width:100%}.task-filter select{flex:1 1 145px}.student-assignment-section,.lesson-discussion{padding:25px 20px 28px}.lesson-section-title h2{font-size:28px}.student-comment{grid-template-columns:36px minmax(0,1fr)}.comment-avatar{width:36px;height:36px}.comment-body header small{width:100%;margin-left:0}.assignment-admin-footer{align-items:flex-start}.review-form{padding:18px}.submission-head,.submission-context,.submission-answer{padding-left:18px;padding-right:18px}}

/* ===== Tahap 5: laporan, pemantauan, dan ekspor Excel ===== */
.report-hero{display:flex;justify-content:space-between;align-items:center;gap:30px;min-height:280px}.report-hero>div{max-width:850px}.report-hero h2{max-width:850px}.report-hero-symbol{width:124px;height:124px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:64px;font-weight:300}.report-export-actions{flex-wrap:wrap}.report-stats{grid-template-columns:repeat(6,minmax(0,1fr))}.report-stats .stat-card{min-height:148px}.report-filter-card{overflow:visible}.report-filter-form{display:grid;grid-template-columns:1.4fr repeat(3,minmax(160px,1fr)) auto;gap:14px;align-items:end}.report-filter-form label>span{display:block;margin-bottom:7px;font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.report-filter-form input,.report-filter-form select{width:100%;min-height:46px;padding:0 13px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);outline:none}.report-filter-form input:focus,.report-filter-form select:focus{border-color:var(--green-800);box-shadow:0 0 0 4px rgba(49,95,77,.1)}.section-note{max-width:350px;color:var(--muted);line-height:1.5;text-align:right}.report-table-wrap{max-height:650px;overflow:auto}.report-table{min-width:1080px}.report-table thead{position:sticky;top:0;z-index:2}.report-table td{vertical-align:middle}.report-table td>strong,.report-table td>small{display:block}.report-table td>small{margin-top:6px;color:var(--muted);line-height:1.55}.mini-progress{width:150px;height:8px;margin-bottom:8px;border-radius:999px;background:#e6eee8;overflow:hidden}.mini-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3c8063,#7cae87)}.mini-progress.large{width:100%;height:10px;margin:17px 0}.course-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.course-report-card{padding:22px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(180deg,#fff,#fafcf9);box-shadow:0 10px 30px rgba(36,77,61,.045)}.course-report-card header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.course-report-card header small{display:block;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.course-report-card h3{margin:5px 0 0;font:500 25px Georgia,serif;color:var(--green-950)}.course-report-card header>strong{font:500 34px Georgia,serif;color:var(--green-900)}.course-report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.course-report-metrics span{padding:12px;border-radius:13px;background:#f4f8f5;text-align:center}.course-report-metrics strong,.course-report-metrics small{display:block}.course-report-metrics strong{font-size:20px;color:var(--green-950)}.course-report-metrics small{margin-top:3px;color:var(--muted);font-size:11px}.activity-list{display:grid;gap:12px}.activity-list article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:15px;background:#fbfcfa}.activity-list article>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--green-100);color:var(--green-900);font-weight:900}.activity-list strong,.activity-list small{display:block}.activity-list p{margin:4px 0 6px;color:#415249;line-height:1.55}.activity-list small{color:var(--muted)}

.participant-report-head{margin-bottom:20px}.back-link{display:inline-flex;margin-bottom:14px;color:var(--green-800);font-weight:900;text-decoration:none}.participant-report-profile{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:18px;align-items:center;padding:24px;border-radius:21px;background:linear-gradient(135deg,var(--green-900),#3a7259);color:#fff;box-shadow:0 18px 40px rgba(36,77,61,.18)}.participant-report-profile>span{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);font:500 34px Georgia,serif}.participant-report-profile .eyebrow{color:#dbeadf}.participant-report-profile h2{margin:3px 0 5px;font:500 36px Georgia,serif}.participant-report-profile p{margin:0;color:#e7f0ea}.profile-report-status{text-align:right}.profile-report-status .status{display:inline-flex}.profile-report-status small{display:block;margin-top:9px;color:#dbeadf;line-height:1.5}.participant-course-grid{margin-bottom:20px}.participant-lesson-list{display:grid;gap:9px}.participant-lesson-list>h3{margin:20px 0 7px;font:500 24px Georgia,serif;color:var(--green-950)}.participant-lesson-list>h3:first-child{margin-top:0}.participant-lesson-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}.participant-lesson-row>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#f2f5f2;color:var(--muted);font-weight:900}.participant-lesson-row.is-complete>span{background:var(--green-800);color:#fff}.participant-lesson-row strong,.participant-lesson-row small{display:block}.participant-lesson-row div small,.participant-lesson-row>small{margin-top:4px;color:var(--muted)}.participant-submission-list{display:grid;gap:15px}.participant-submission-list article{padding:19px;border:1px solid var(--line);border-radius:16px;background:#fff}.participant-submission-list header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.participant-submission-list header small{color:var(--muted)}.participant-submission-list h3{margin:5px 0 0;font:500 23px Georgia,serif;color:var(--green-950)}.submission-score{display:flex;gap:12px;align-items:center;margin-top:15px}.submission-score strong{padding:8px 12px;border-radius:999px;background:var(--green-100);color:var(--green-900)}.submission-score small{color:var(--muted)}.participant-submission-list article>p{margin:15px 0 0;padding:13px 15px;border-radius:13px;background:#f8faf7;color:#415249;line-height:1.7}

@media(max-width:1250px){.report-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.report-filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-form .btn{justify-self:start}.course-report-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.report-hero-symbol{display:none}.course-report-grid{grid-template-columns:1fr}.participant-report-profile{grid-template-columns:64px minmax(0,1fr)}.participant-report-profile>span{width:64px;height:64px}.profile-report-status{grid-column:1/-1;text-align:left}.profile-report-status small{display:inline-block;margin-left:10px}.participant-lesson-row{grid-template-columns:36px minmax(0,1fr)}.participant-lesson-row>small{grid-column:2}}
@media(max-width:680px){.report-stats{grid-template-columns:1fr 1fr}.report-filter-form{grid-template-columns:1fr}.section-note{text-align:left}.course-report-metrics{grid-template-columns:1fr 1fr}.participant-report-profile{padding:20px;grid-template-columns:52px minmax(0,1fr)}.participant-report-profile>span{width:52px;height:52px;font-size:25px}.participant-report-profile h2{font-size:29px}.participant-submission-list header{flex-direction:column}.submission-score{align-items:flex-start;flex-direction:column}.report-export-actions .btn{width:100%;justify-content:center}}

/* ===== Tahap 6: penyempurnaan UI, ikon, dan Google Drive ===== */
:root{
  --green-950:#123b2d;
  --green-900:#1d513e;
  --green-800:#326a52;
  --green-700:#4c8068;
  --green-100:#e5f0e9;
  --green-50:#f4f8f5;
  --cream:#f8f3e9;
  --cream-2:#eee5d5;
  --ink:#203129;
  --muted:#66736c;
  --line:#e0e7e2;
  --shadow:0 22px 60px rgba(24,63,47,.11);
}
html{scroll-behavior:smooth}
body{line-height:1.45}
::selection{background:#bcd8c6;color:#173529}
a,button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid rgba(76,128,104,.35);outline-offset:3px}
textarea{resize:vertical}
.brand-logo-wrap{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:50%;background:var(--cream);box-shadow:0 10px 30px rgba(0,0,0,.14);overflow:hidden}
.brand-logo-wrap .brand-logo{width:100%;height:100%;border:0;box-shadow:none;border-radius:50%;object-fit:cover;object-position:center 18%}
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn-primary:not(:disabled):hover{box-shadow:0 12px 26px rgba(36,77,61,.24)}
button.is-loading{position:relative;color:transparent!important;pointer-events:none}
button.is-loading::after{content:"";position:absolute;inset:50% auto auto 50%;width:18px;height:18px;margin:-9px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:yuliSpin .7s linear infinite}
.btn-ghost.is-loading::after{border-color:rgba(36,77,61,.25);border-top-color:var(--green-900)}
@keyframes yuliSpin{to{transform:rotate(360deg)}}
.alert{box-shadow:0 10px 28px rgba(28,66,51,.07)}

/* Admin navigation */
.dashboard-shell{grid-template-columns:292px minmax(0,1fr)}
.sidebar{padding:25px 20px 18px;background:linear-gradient(180deg,#113b2c 0%,#143f30 65%,#0f3327 100%);box-shadow:12px 0 34px rgba(17,55,42,.08);z-index:60}
.brand-sidebar{padding:2px 5px;color:#fff}
.brand-sidebar .brand-logo-wrap{width:50px;height:50px;flex-basis:50px}
.brand-sidebar strong{font-size:18px;color:#fff}
.brand-sidebar small{color:#c7dacf;opacity:1}
.sidebar-label{margin:34px 12px 9px;color:#7fa68e;font-size:10px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.nav-list{margin-top:0;gap:6px}
.nav-list a{grid-template-columns:32px 1fr;min-height:50px;padding:0 13px;border:1px solid transparent;color:rgba(255,255,255,.72);transition:.18s ease}
.nav-list a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-list a.active{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.09));border-color:rgba(255,255,255,.12);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.nav-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.07);color:currentColor}
.nav-list a.active .nav-icon{background:rgba(255,255,255,.14)}
.nav-icon svg{width:17px;height:17px;fill:currentColor}
.sidebar-help{display:flex;gap:11px;align-items:flex-start;margin:auto 4px 16px;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.045)}
.sidebar-help span{font-size:20px}.sidebar-help p{margin:0;color:rgba(255,255,255,.62);font-size:11px;line-height:1.55}
.sidebar-logout{margin-top:0}
.sidebar-logout button{display:flex;gap:10px;align-items:center;justify-content:center;color:rgba(255,255,255,.8)}
.sidebar-logout .nav-icon{background:transparent}
.dashboard-main{max-width:1700px;padding-top:30px}
.topbar{padding-bottom:18px;border-bottom:1px solid rgba(224,231,226,.8)}
.profile-chip img{width:42px;height:42px;object-fit:cover;object-position:center 18%;border-radius:50%;background:var(--cream)}
.dashboard-footer{display:flex;justify-content:space-between;gap:20px;margin-top:42px;padding:20px 2px 0;border-top:1px solid var(--line);color:var(--muted)}
.dashboard-footer span{font-weight:800;color:var(--green-950)}
.admin-menu-toggle{display:none}
.sidebar-backdrop{display:none}

/* Auth polish */
.auth-shell-refined .auth-card{border-color:rgba(36,77,61,.1);box-shadow:0 30px 90px rgba(24,56,43,.14)}
.auth-footnote{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;text-align:center}
.auth-story .brand-logo-wrap{border:2px solid rgba(255,255,255,.7)}
.auth-hero-image{filter:drop-shadow(0 30px 50px rgba(0,0,0,.22)) saturate(.98)}

/* Student dashboard */
.refined-student-header{min-height:86px;box-shadow:0 8px 30px rgba(24,63,47,.045)}
.refined-student-header .brand{text-decoration:none}
.student-header-actions{display:flex;gap:18px;align-items:center}
.student-greeting{display:grid;text-align:right}.student-greeting small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.student-greeting strong{font-size:13px;color:var(--green-950)}
.student-main-refined{width:min(1320px,calc(100% - 44px));padding-top:45px}
.refined-welcome{min-height:400px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:28px;align-items:center;padding:clamp(34px,5vw,66px);position:relative;overflow:hidden;background:radial-gradient(circle at 87% 8%,rgba(255,255,255,.15),transparent 23%),linear-gradient(130deg,#123b2d,#286149)}
.refined-welcome::before{content:"";position:absolute;inset:auto -80px -220px auto;width:500px;height:500px;border-radius:50%;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 65px rgba(255,255,255,.035),0 0 0 130px rgba(255,255,255,.02)}
.welcome-copy{position:relative;z-index:2}.refined-welcome h1{max-width:720px;font-size:clamp(42px,5vw,67px)}
.welcome-copy>p:last-of-type{max-width:650px;margin:22px 0 0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.75}
.welcome-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.welcome-points span{padding:8px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.08);color:#e4f0e8;font-size:11px;font-weight:800}
.welcome-visual{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:300px}.welcome-visual img{position:relative;z-index:2;width:115%;max-width:650px;max-height:390px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 35px rgba(0,0,0,.18))}.welcome-orbit{position:absolute;width:300px;height:300px;right:8%;top:8%;border-radius:50%;background:rgba(255,255,255,.07);box-shadow:0 0 0 40px rgba(255,255,255,.03),0 0 0 80px rgba(255,255,255,.018)}
.student-course-section{padding-top:5px}.student-section-heading{align-items:center}.course-count-badge{padding:8px 12px;border-radius:999px;background:var(--green-100);color:var(--green-900);font-size:12px;font-weight:900}
.refined-course-grid{grid-template-columns:repeat(auto-fit,minmax(300px,360px));justify-content:start}
.refined-course-card{position:relative;transition:transform .2s ease,box-shadow .2s ease}.refined-course-card:hover{transform:translateY(-4px);box-shadow:0 23px 55px rgba(29,59,45,.14)}
.refined-course-card .course-cover{position:relative;min-height:210px;overflow:hidden}.refined-course-card .course-cover img{height:210px;transition:transform .35s ease}.refined-course-card:hover .course-cover img{transform:scale(1.025)}
.course-progress-pill{position:absolute!important;right:15px;top:15px!important;padding:7px 10px;border-radius:999px;background:rgba(18,59,45,.88)!important;color:#fff;font-size:12px!important;font-weight:900;backdrop-filter:blur(8px)}
.course-batch-label{display:inline-flex!important;padding:5px 9px;border-radius:999px;background:var(--green-100);letter-spacing:.06em!important}
.refined-course-card .course-body p{min-height:52px}.refined-course-card .btn{display:flex;align-items:center;justify-content:center;gap:10px}
.student-footer{width:min(1320px,calc(100% - 44px));margin:0 auto;padding:24px 0 35px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted)}.student-footer span{font-weight:800;color:var(--green-950)}

/* Learning page */
.refined-learning-header{box-shadow:0 10px 35px rgba(23,58,44,.06)}
.refined-learning-header .brand{text-decoration:none}.refined-learning-header .brand-logo-wrap{width:46px;height:46px;flex-basis:46px}
.learning-header-actions{display:flex;gap:10px;align-items:center}.header-home-link{padding:9px 12px;border-radius:11px;color:var(--green-900);font-size:12px;font-weight:900;text-decoration:none;background:var(--green-100)}
.curriculum-sidebar{background:linear-gradient(180deg,#173f30,#123529)}
.curriculum-nav a{border:1px solid transparent}.curriculum-nav a.active{border-color:rgba(255,255,255,.11)}
.lesson-card{box-shadow:0 18px 55px rgba(25,61,46,.08)}
.drive-file-chip{background:#eef6f0;border-color:#cfe2d5;color:#24563f}
.drive-unavailable-note{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:13px;background:#fff4df;border:1px solid #efd7a9;color:#7c5825}.drive-unavailable-note span{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#e6b85a;color:#fff;font-weight:900}.drive-unavailable-note p{margin:1px 0 0;line-height:1.55;font-size:13px}
.image-upload-zone{position:relative;overflow:hidden;min-height:150px}.image-upload-zone.is-disabled{opacity:.58;cursor:not-allowed}.upload-image-icon{font-size:32px}.upload-preview{width:min(100%,280px);max-height:220px;margin-top:12px;object-fit:contain;border-radius:13px;border:1px solid var(--line);background:#fff}

/* Settings */
.settings-hero{min-height:260px}.settings-status{width:170px;height:170px;flex:0 0 170px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);text-align:center}.settings-status>span{width:46px;height:46px;display:grid;place-items:center;margin-bottom:10px;border-radius:50%;background:#c2913c;color:#fff;font-size:24px;font-weight:900}.settings-status.is-ready>span{background:#75a984}.settings-status strong,.settings-status small{display:block}.settings-status small{max-width:125px;margin-top:5px;color:rgba(255,255,255,.68);font-size:10px;line-height:1.4}
.settings-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;margin-top:24px}.settings-grid h2,.storage-info-card h2{margin:0 0 18px;font:500 30px Georgia,serif;color:var(--green-950)}
.soft-steps{display:grid;gap:13px;margin:0 0 24px;padding-left:23px;color:#43544b}.soft-steps li{padding-left:5px;line-height:1.65}.soft-steps li::marker{color:var(--green-800);font-weight:900}
.privacy-note{display:flex;gap:11px;margin-top:18px;padding:14px;border-radius:14px;background:var(--green-50);color:var(--muted)}.privacy-note p{margin:0;font-size:12px;line-height:1.6}
.secret-field{position:relative}.secret-field input{padding-right:100px!important}.secret-field button{position:absolute;right:7px;top:7px;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:var(--green-100);color:var(--green-900);font-size:11px;font-weight:900;cursor:pointer}
.drive-test-form{margin-top:12px}.storage-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center}.storage-flow article{min-height:150px;padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbf8);text-align:center}.storage-flow article>span{font-size:34px}.storage-flow article strong{display:block;margin:9px 0 5px;color:var(--green-950)}.storage-flow article p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.flow-arrow{color:#91a69a;font-size:26px}

/* Mobile */
@media(max-width:1100px){
  .refined-welcome{grid-template-columns:1fr minmax(300px,.72fr)}
  .refined-welcome h1{font-size:clamp(38px,5vw,56px)}
  .settings-grid{grid-template-columns:1fr}
}
@media(max-width:980px){
  .dashboard-shell{display:block!important}
  .sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0;width:min(86vw,310px)!important;height:100vh!important;padding:24px 18px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;transform:translateX(-106%);transition:transform .24s ease;overflow-y:auto}
  .sidebar.is-open{transform:translateX(0)}
  .nav-list{display:grid!important}.sidebar-help{display:flex}.sidebar-logout{margin-top:0!important}.sidebar-logout button{padding:0 14px!important}
  .sidebar-backdrop{position:fixed;inset:0;z-index:55;background:rgba(8,27,20,.46);backdrop-filter:blur(3px)}.sidebar-backdrop.is-visible{display:block}
  .admin-menu-toggle{position:fixed;left:14px;bottom:15px;z-index:70;min-height:50px;padding:0 16px;display:flex;gap:5px;align-items:center;border:0;border-radius:999px;background:var(--green-950);color:#fff;box-shadow:0 15px 35px rgba(13,47,35,.3);font-size:12px;font-weight:900}.admin-menu-toggle span{display:none}.admin-menu-toggle b{font-weight:900}
  body.menu-open{overflow:hidden}
  .dashboard-main{padding:24px 18px 80px!important}.topbar{padding-left:0}.profile-chip{display:flex!important}
  .refined-welcome{grid-template-columns:1fr;min-height:0}.welcome-visual{min-height:240px}.welcome-visual img{max-height:300px}.welcome-orbit{left:50%;right:auto;transform:translateX(-50%)}
  .storage-flow{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);text-align:center}
}
@media(max-width:700px){
  .topbar{align-items:flex-start}.topbar h1{font-size:31px}.profile-chip{padding:6px}.profile-chip div{display:none}
  .dashboard-footer,.student-footer{flex-direction:column;gap:5px}
  .student-header-actions{gap:8px}.student-greeting{display:none}.refined-student-header{min-height:75px;padding:0 14px}.refined-student-header .brand-logo-wrap{width:44px;height:44px;flex-basis:44px}.refined-student-header .brand small{display:none}.refined-student-header .brand strong{font-size:15px}
  .student-main-refined{width:min(100% - 26px,1320px);padding-top:22px}.refined-welcome{padding:28px 22px;border-radius:22px}.refined-welcome h1{font-size:38px;letter-spacing:-1px}.welcome-points{display:grid}.welcome-visual{min-height:180px}.welcome-visual img{width:125%;max-height:225px}.student-section-heading{align-items:flex-end}.course-count-badge{font-size:10px}.refined-course-grid{grid-template-columns:1fr}.student-footer{width:min(100% - 26px,1320px)}
  .header-home-link{display:none}.learning-header-actions{margin-left:auto}
  .settings-status{display:none}.settings-hero{min-height:0}.settings-grid h2,.storage-info-card h2{font-size:27px}
}
.settings-form-card .field select{width:100%;min-height:54px;padding:0 15px;border:1px solid #d8ddd8;border-radius:13px;background:#fff;color:var(--ink);outline:none}.settings-form-card .field select:focus{border-color:var(--green-800);box-shadow:0 0 0 4px rgba(49,95,77,.12)}

/* ===== Tahap 7: pengalaman aplikasi mobile, chat otomatis, dan upload interaktif ===== */
:root{
  --app-bar-height:72px;
  --bottom-nav-height:70px;
  --chat-bg:#eef5ef;
  --chat-mine:#d7efe0;
  --chat-teacher:#fff;
}
[hidden]{display:none!important}
.live-inline-message{margin:0 0 14px;padding:11px 14px;border-radius:12px;font-size:13px;font-weight:750}
.live-inline-message.is-error{background:#fff0ee;border:1px solid #efc4bd;color:#a13d32}
.live-inline-message.is-success{background:#edf8ef;border:1px solid #c9dfcf;color:#286044}

/* Workspace admin */
.app-hero-compact{min-height:220px}
.admin-workspace-tabs{position:sticky;top:0;z-index:25;display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:10px;margin:22px 0;padding:8px;width:max-content;max-width:100%;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 13px 35px rgba(24,63,47,.08);backdrop-filter:blur(12px)}
.admin-workspace-tabs button{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;min-height:48px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;text-align:left}
.admin-workspace-tabs button>span{font-size:18px}.admin-workspace-tabs button>b{font-size:13px}.admin-workspace-tabs button>small{min-width:25px;padding:4px 7px;border-radius:999px;background:#edf2ee;text-align:center;font-weight:900}
.admin-workspace-tabs button.is-active{background:var(--green-900);color:#fff;box-shadow:0 10px 24px rgba(29,81,62,.2)}
.admin-workspace-tabs button.is-active>small{background:rgba(255,255,255,.15)}
.app-submission-list{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));align-items:start}
.app-submission-card{height:max-content}
.review-drawer{border-top:1px solid var(--line);background:#f8faf7}
.review-drawer summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;color:var(--green-950);font-weight:850;cursor:pointer;list-style:none}
.review-drawer summary::-webkit-details-marker{display:none}.review-drawer summary::after{content:"⌄";font-size:18px;transition:transform .2s ease}.review-drawer[open] summary::after{transform:rotate(180deg)}
.review-drawer summary b{margin-left:auto;padding:5px 9px;border-radius:999px;background:var(--green-100);color:var(--green-900);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.review-drawer .review-form{border-top:1px solid var(--line)}

/* Admin live chat */
.live-admin-chat-card{padding:0;overflow:hidden}
.live-admin-chat-shell{display:grid;grid-template-columns:370px minmax(0,1fr);height:min(760px,calc(100vh - 190px));min-height:620px;background:#fff}
.chat-inbox{min-width:0;border-right:1px solid var(--line);background:#fbfcfb;display:flex;flex-direction:column}
.chat-inbox>header{padding:22px 20px 14px}.chat-inbox h2{margin:3px 0 7px;font:500 27px Georgia,serif;color:var(--green-950)}
.chat-connection{display:inline-flex;gap:7px;align-items:center;color:var(--muted);font-size:10px}.chat-connection i{width:8px;height:8px;border-radius:50%;background:#46a06a;box-shadow:0 0 0 4px rgba(70,160,106,.12)}.chat-connection b{font-weight:700}
.chat-search{display:flex;align-items:center;gap:8px;margin:0 15px 12px;padding:0 12px;min-height:42px;border:1px solid var(--line);border-radius:13px;background:#fff}.chat-search span{font-size:20px;color:var(--muted)}.chat-search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}
.chat-conversation-list{min-height:0;overflow:auto;padding:0 9px 16px}
.chat-conversation-item{position:relative;width:100%;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 10px;border:0;border-radius:15px;background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.chat-conversation-item:hover{background:#f0f5f1}.chat-conversation-item.is-active{background:#e4f0e8}
.conversation-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#dcece1,#c9dfd0);color:var(--green-950);font-weight:950}
.conversation-copy{min-width:0}.conversation-copy strong,.conversation-copy small,.conversation-copy p{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.conversation-copy strong{font-size:13px}.conversation-copy small{margin:2px 0;color:var(--green-700);font-size:10px;font-weight:800}.conversation-copy p{margin:0;color:var(--muted);font-size:11px}
.chat-conversation-item time{align-self:start;margin-top:3px;color:#86928b;font-size:9px}.chat-conversation-item em{position:absolute;right:10px;bottom:11px;min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:var(--green-800);color:#fff;font-size:9px;font-style:normal;font-weight:900}
.chat-thread-stage{min-width:0;position:relative;background:var(--chat-bg)}
.chat-stage-empty{height:100%;display:grid;place-items:center;align-content:center;text-align:center;padding:30px;color:var(--muted)}.chat-stage-empty span{font-size:48px}.chat-stage-empty h3{margin:12px 0 5px;color:var(--green-950)}.chat-stage-empty p{margin:0}
.admin-chat-thread{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.admin-chat-thread-header{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;gap:11px;align-items:center;min-height:72px;padding:10px 18px;border-bottom:1px solid var(--line);background:#fff}.admin-chat-thread-header>button[data-chat-back]{display:none;border:0;background:transparent;font-size:20px}.admin-chat-thread-header strong,.admin-chat-thread-header small{display:block}.admin-chat-thread-header small{margin-top:3px;color:var(--muted);font-size:10px}.thread-menu-button{border:0;background:transparent;color:var(--muted);font-size:19px;cursor:pointer}.thread-menu-form{margin:0}
.admin-chat-messages,.live-chat-messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:22px 24px;display:flex;flex-direction:column;gap:9px;background-image:radial-gradient(rgba(42,91,69,.055) 1px,transparent 1px);background-size:19px 19px}
.chat-message-row{display:flex;gap:8px;align-items:flex-end;max-width:min(78%,700px);animation:messageIn .18s ease both}.chat-message-row.is-mine{align-self:flex-end;flex-direction:row-reverse}.chat-avatar{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#d9e9dd;color:var(--green-950);font-size:11px;font-weight:950}.chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-bubble{position:relative;min-width:90px;padding:9px 12px 7px;border-radius:5px 17px 17px 17px;background:var(--chat-teacher);box-shadow:0 4px 13px rgba(25,57,44,.07)}.is-mine .chat-bubble{border-radius:17px 5px 17px 17px;background:var(--chat-mine)}.is-teacher:not(.is-mine) .chat-bubble{border-left:3px solid var(--green-700)}
.chat-name{display:flex;gap:6px;align-items:center;margin-bottom:3px;color:var(--green-800);font-size:10px;font-weight:900}.chat-name span{padding:2px 5px;border-radius:999px;background:var(--green-100);font-size:8px}.chat-bubble p{margin:0;padding-right:32px;color:#304239;font-size:13px;line-height:1.55;overflow-wrap:anywhere}.chat-bubble time{position:absolute;right:9px;bottom:6px;color:#819087;font-size:8px}
@keyframes messageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.admin-live-chat-composer,.live-chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.admin-live-chat-composer textarea,.chat-input-wrap textarea{width:100%;min-height:43px;max-height:132px;padding:11px 14px;border:1px solid #d5ded7;border-radius:20px;outline:0;resize:none;background:#f7f9f7;color:var(--ink);line-height:1.45}.admin-live-chat-composer textarea:focus,.chat-input-wrap textarea:focus{border-color:var(--green-700);box-shadow:0 0 0 4px rgba(49,95,77,.08);background:#fff}
.admin-live-chat-composer button,.chat-send-button{width:43px;height:43px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--green-900);color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(29,81,62,.22)}

/* Student live chat */
.live-discussion{padding:0!important;background:#fff!important;overflow:hidden}
.live-chat-header{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:13px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfcfb)}
.chat-teacher-avatar{width:50px;height:50px;border-radius:50%;overflow:hidden;box-shadow:0 7px 18px rgba(29,81,62,.14)}.chat-teacher-avatar img{width:100%;height:100%;object-fit:cover}
.live-chat-header .eyebrow{margin:0}.live-chat-header h2{margin:2px 0 4px;font:500 24px Georgia,serif;color:var(--green-950)}.chat-scroll-latest{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--green-900);cursor:pointer}
.live-chat-window{height:440px;min-height:320px;background:var(--chat-bg)}
.chat-empty{margin:auto;display:grid;place-items:center;align-content:center;text-align:center;min-height:100%;padding:30px;color:var(--muted)}.chat-empty span{font-size:42px}.chat-empty strong{margin:10px 0 4px;color:var(--green-950)}.chat-empty p{max-width:420px;margin:0;line-height:1.6}
.chat-input-wrap{position:relative}.chat-input-wrap small{position:absolute;right:14px;bottom:4px;color:#9aa39e;font-size:8px}.chat-send-button{width:auto;min-width:90px;padding:0 16px;border-radius:22px;display:flex;gap:8px}.chat-send-button b{font-size:14px}.chat-send-button.is-sending{opacity:.7}.chat-send-button:disabled{cursor:wait}

/* Upload task experience */
.app-upload-form{position:relative}.image-upload-zone{transition:border-color .18s ease,background .18s ease,transform .18s ease}.image-upload-zone:hover{border-color:var(--green-700);background:#f1f8f3}.image-upload-zone.has-file{grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto auto auto;place-items:start;text-align:left;gap:3px;padding:14px}.image-upload-zone.has-file .upload-image-icon{display:none}.image-upload-zone.has-file .upload-preview{grid-row:1/4;width:96px;height:96px;object-fit:cover;border-radius:12px}.image-upload-zone.has-file strong{max-width:100%;overflow-wrap:anywhere}.upload-remove{margin-top:6px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green-900);font-size:10px;font-weight:800;cursor:pointer}
.upload-progress{padding:12px 14px;border-radius:13px;background:#f1f6f2}.upload-progress>div{height:7px;overflow:hidden;border-radius:999px;background:#dce7df}.upload-progress>div span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green-700),#72a887);transition:width .2s ease}.upload-progress small{display:block;margin-top:7px;color:var(--muted);font-size:10px}.assignment-submit-button{display:flex;justify-content:center;gap:10px}.app-upload-form.is-uploading{pointer-events:none;opacity:.88}

/* Mobile app shell */
.student-bottom-nav{display:none}.curriculum-backdrop{display:none}.mobile-profile-sheet{display:none}
@media(max-width:980px){
  .app-submission-list{grid-template-columns:1fr}
  .live-admin-chat-shell{grid-template-columns:330px minmax(0,1fr)}
}
@media(max-width:760px){
  html{scroll-padding-bottom:calc(var(--bottom-nav-height) + 20px)}
  body.mobile-app-page{padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));background:#f2f6f3}
  .student-bottom-nav{position:fixed;z-index:90;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));height:var(--bottom-nav-height);display:grid;grid-template-columns:repeat(4,1fr);padding:7px;border:1px solid rgba(25,61,47,.09);border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 18px 45px rgba(16,52,39,.2);backdrop-filter:blur(16px)}
  .student-bottom-nav a,.student-bottom-nav button{display:grid;place-items:center;align-content:center;gap:2px;border:0;border-radius:15px;background:transparent;color:#69776f;text-decoration:none;cursor:pointer}.student-bottom-nav span{font-size:20px;line-height:1}.student-bottom-nav small{font-size:9px;font-weight:850}.student-bottom-nav .is-active{background:var(--green-100);color:var(--green-950)}.student-bottom-nav .is-accent{background:var(--green-900);color:#fff;box-shadow:0 8px 18px rgba(29,81,62,.2)}.student-bottom-nav [aria-disabled="true"]{opacity:.38;pointer-events:none}
  .student-dashboard-page .refined-student-header{min-height:68px;padding:0 15px}.student-dashboard-page .brand-logo-wrap{width:42px;height:42px;flex-basis:42px}.student-dashboard-page .brand strong{font-size:16px}.student-dashboard-page .student-header-actions{display:none}
  .student-main-refined{width:100%;padding:14px 12px 32px}.refined-welcome{min-height:auto;display:block;padding:25px 20px 0;border-radius:23px}.refined-welcome h1{font-size:34px;line-height:1.05}.welcome-copy>p:last-of-type{font-size:13px;line-height:1.6}.welcome-points{display:none}.welcome-visual{min-height:190px;margin-top:5px}.welcome-visual img{width:118%;height:200px;object-position:center bottom}.welcome-orbit{width:170px;height:170px}.student-course-section{padding:14px 0}.student-section-heading{padding:0 5px}.student-section-heading h2{font-size:27px}.course-count-badge{display:none}.refined-course-grid{display:grid;grid-template-columns:1fr;gap:13px}.refined-course-card{display:grid;grid-template-columns:130px minmax(0,1fr);border-radius:19px}.refined-course-card .course-cover{min-height:100%;height:100%}.refined-course-card .course-cover img{height:100%;min-height:220px;object-fit:cover}.course-progress-pill{right:8px!important;top:8px!important}.refined-course-card .course-body{padding:16px 14px}.refined-course-card .course-body h3{font-size:21px}.refined-course-card .course-body p{min-height:0;font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.refined-course-card .btn{min-height:42px;padding:0 10px;font-size:11px}.student-footer{display:none}
  .mobile-profile-sheet{display:block;position:fixed;z-index:110;inset:0}.mobile-profile-sheet[hidden]{display:none!important}.mobile-sheet-backdrop{position:absolute;inset:0;background:rgba(12,39,29,.48);backdrop-filter:blur(3px)}.mobile-profile-sheet article{position:absolute;left:0;right:0;bottom:0;padding:14px 22px calc(24px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:#fff;text-align:center;box-shadow:0 -22px 60px rgba(14,47,35,.2);animation:sheetUp .2s ease}.mobile-profile-sheet img{width:76px;height:76px;object-fit:cover;border-radius:50%;box-shadow:0 10px 25px rgba(29,81,62,.15)}.mobile-profile-sheet small{display:block;margin-top:12px;color:var(--muted)}.mobile-profile-sheet h3{margin:2px 0 6px;color:var(--green-950)}.mobile-profile-sheet p{margin:0 0 18px;color:var(--muted);font-size:12px}.sheet-handle{display:block;width:42px;height:4px;margin:0 auto 14px;border-radius:999px;background:#d8dfda}@keyframes sheetUp{from{transform:translateY(25px);opacity:.7}to{transform:none;opacity:1}}

  .learning-header{height:66px;min-height:66px;padding:0 12px}.learning-header .brand-logo-wrap{width:40px;height:40px;flex-basis:40px}.learning-header .brand small{font-size:8px}.learning-header .brand strong{font-size:14px}.learning-header-actions .header-home-link{display:none}.mobile-curriculum-toggle{display:none}.learning-shell{min-height:calc(100vh - 66px)}.lesson-main{padding:10px 8px 28px}.lesson-card{border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(25,57,44,.08)}.lesson-video{border-radius:0;aspect-ratio:16/10}.lesson-content{padding:24px 20px 15px}.lesson-content h1{font-size:34px;line-height:1.08}.lesson-prose{font-size:15px;line-height:1.75}.student-assignment-section,.lesson-discussion{padding:24px 15px 26px}.student-assignment-card{padding:17px 14px;border-radius:17px}.student-assignment-card>header{display:grid;gap:9px}.student-assignment-card h3{font-size:23px}.student-assignment-card .status{justify-self:start}.assignment-instructions{font-size:13px}.student-upload-zone{min-height:105px}.lesson-completion{padding:10px 16px 25px}.btn-complete{width:100%}.lesson-pagination{gap:8px}.lesson-pagination a{min-height:73px;padding:13px 12px}.lesson-pagination small{font-size:9px}.lesson-pagination strong{font-size:11px}
  .curriculum-sidebar{top:0;z-index:100;height:100dvh;padding-bottom:calc(18px + env(safe-area-inset-bottom))}.curriculum-backdrop{position:fixed;z-index:95;inset:0;display:block;background:rgba(11,37,28,.45);opacity:0;pointer-events:none;transition:opacity .2s ease}.curriculum-backdrop.is-visible{opacity:1;pointer-events:auto}body.curriculum-open{overflow:hidden}
  .live-chat-header{grid-template-columns:44px minmax(0,1fr) auto;padding:14px}.chat-teacher-avatar{width:43px;height:43px}.live-chat-header h2{font-size:20px}.live-chat-window{height:58dvh;min-height:380px;max-height:590px}.live-chat-messages{padding:17px 11px}.chat-message-row{max-width:88%}.chat-bubble p{font-size:12.5px}.live-chat-composer{position:sticky;bottom:0;padding:9px 10px calc(9px + env(safe-area-inset-bottom));gap:7px}.chat-send-button{min-width:48px;width:48px;padding:0}.chat-send-button span{display:none}.chat-input-wrap small{display:none}

  .admin-workspace-tabs{position:relative;top:auto;width:100%;grid-template-columns:1fr 1fr;margin:14px 0;padding:5px;border-radius:14px}.admin-workspace-tabs button{grid-template-columns:22px 1fr auto;min-height:44px;padding:0 9px}.admin-workspace-tabs button b{font-size:11px}.assignment-stats{grid-template-columns:1fr 1fr}.app-hero-compact{min-height:190px}.assignment-hero-icon{display:none}.task-filter{width:100%}.task-filter select{flex:1;min-width:130px}.task-filter .btn{width:100%}
  .live-admin-chat-card{margin-left:-2px;margin-right:-2px}.live-admin-chat-shell{display:block;height:calc(100dvh - 175px);min-height:560px;position:relative;overflow:hidden}.chat-inbox{height:100%;border-right:0}.chat-thread-stage{position:absolute;z-index:4;inset:0;transform:translateX(105%);transition:transform .22s ease}.live-admin-chat-card.has-open-thread .chat-thread-stage{transform:translateX(0)}.admin-chat-thread-header>button[data-chat-back]{display:block}.chat-conversation-item{padding:14px 10px}.admin-chat-messages{padding:16px 10px}.admin-live-chat-composer{padding:9px 10px calc(9px + env(safe-area-inset-bottom))}.chat-inbox>header{padding:17px 15px 12px}.chat-search{margin:0 10px 8px}
}
@media(max-width:430px){
  .refined-course-card{grid-template-columns:112px minmax(0,1fr)}.refined-course-card .course-cover img{min-height:205px}.refined-course-card .course-body{padding:14px 12px}.refined-course-card .course-body h3{font-size:19px}.progress-row{font-size:9px}.course-batch-label{font-size:8px!important}
  .assignment-stats{gap:8px}.assignment-stats .stat-card{padding:14px 12px}.assignment-stats .stat-card strong{font-size:28px}.assignment-stats .stat-card span,.assignment-stats .stat-card small{font-size:9px}
  .admin-workspace-tabs button>span{display:none}.admin-workspace-tabs button{grid-template-columns:1fr auto}.app-submission-card .submission-head{padding:15px}.submission-context,.submission-answer{padding-left:15px;padding-right:15px}.review-drawer summary{padding:14px 15px}.review-drawer summary b{display:none}.review-form{padding:15px}
}
.log-count-pill{display:grid;place-items:center;min-width:90px;padding:10px 14px;border-radius:16px;background:var(--green-100);color:var(--green-950)}.log-count-pill strong{font-size:22px}.log-count-pill small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.log-maintenance-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:18px}.log-retention-form,.log-cleanup-panel{padding:18px;border:1px solid var(--line);border-radius:17px;background:#fafcf9}.log-cleanup-panel{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:13px;align-items:center}.log-cleanup-panel>span{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--green-100);font-size:23px}.log-cleanup-panel strong{color:var(--green-950)}.log-cleanup-panel p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.55}@media(max-width:800px){.log-maintenance-grid{grid-template-columns:1fr}.log-cleanup-panel{grid-template-columns:40px minmax(0,1fr)}.log-cleanup-panel .btn{grid-column:1/-1;width:100%}}

/* =========================================================
   Tahap 8 — Grup kelas, UX mobile, filter kelas, aktivitas
   ========================================================= */
.course-filter-chips{display:flex;gap:9px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:thin;scroll-snap-type:x proximity}
.course-filter-chips a{flex:0 0 auto;display:flex;align-items:center;gap:9px;min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--green-900);text-decoration:none;font-size:11px;font-weight:800;scroll-snap-align:start;transition:.18s ease}
.course-filter-chips a:hover,.course-filter-chips a.is-active{border-color:var(--green-700);background:var(--green-900);color:#fff;box-shadow:0 8px 20px rgba(25,76,57,.14)}
.course-filter-chips a b{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:rgba(255,255,255,.16);font-size:9px}.course-filter-chips a:not(.is-active) b{background:var(--green-100)}

.admin-group-chat-card{padding:0!important;overflow:hidden;border-radius:22px;background:#eef6f0}
.group-chat-admin-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 20px;border-bottom:1px solid rgba(24,76,56,.1);background:#fff}
.group-chat-identity{display:flex;align-items:center;gap:13px;min-width:0}.group-chat-logo{width:50px;height:50px;flex:0 0 50px;overflow:hidden;border-radius:50%;box-shadow:0 8px 20px rgba(30,79,60,.15)}.group-chat-logo img{width:100%;height:100%;object-fit:cover}.group-chat-identity h2{margin:1px 0 2px;color:var(--green-950);font:500 23px Georgia,serif}.group-chat-identity small{color:var(--muted);font-size:10px}
.group-course-picker{display:grid;gap:4px;min-width:260px}.group-course-picker span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.group-course-picker select{min-height:42px;padding:0 38px 0 12px;border:1px solid var(--line);border-radius:12px;background:#f8fbf8;color:var(--green-950);font-weight:750}
.group-chat-messages{height:560px;overflow-y:auto;padding:22px 24px;background-color:#edf7ef;background-image:radial-gradient(rgba(43,106,79,.07) 1px,transparent 1px);background-size:18px 18px;scroll-behavior:smooth}
.group-chat-messages .chat-message-row{max-width:min(78%,680px);margin-bottom:10px}.group-chat-messages .chat-bubble{box-shadow:0 2px 8px rgba(21,63,47,.08)}
.group-chat-composer{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:10px;align-items:end;padding:11px 14px;border-top:1px solid rgba(24,76,56,.1);background:#fff}
.group-chat-composer textarea{width:100%;min-height:46px;max-height:128px;resize:none;padding:13px 16px;border:1px solid #cddbd2;border-radius:23px;background:#f7faf8;color:var(--green-950);font:inherit;line-height:1.45;outline:none}.group-chat-composer textarea:focus{border-color:var(--green-700);box-shadow:0 0 0 3px rgba(39,103,76,.1)}
.group-chat-composer button{width:48px;height:48px;border:0;border-radius:50%;background:var(--green-800);color:#fff;box-shadow:0 8px 18px rgba(26,84,61,.22);cursor:pointer;font-size:17px}.group-chat-composer button:hover{transform:translateY(-1px);background:var(--green-950)}.group-chat-composer button:disabled{opacity:.55;cursor:wait}

.group-chat-header{cursor:default}.group-chat-mobile-close{display:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--green-100);color:var(--green-950);font-size:20px}.group-chat-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 18px;border-bottom:1px solid rgba(24,76,56,.08);background:#f9fcf9;color:#66756d;font-size:10px;line-height:1.5}.group-chat-notice p{margin:0}.group-chat-notice span{font-size:15px}.class-group-chat .live-chat-window{height:500px;background:#edf7ef}.class-group-chat .chat-message-row{max-width:min(82%,620px)}.class-group-chat .chat-bubble{border-radius:7px 16px 16px 16px}.class-group-chat .chat-message-row.is-mine .chat-bubble{border-radius:16px 7px 16px 16px;background:#d9f5e5}.class-group-chat .chat-name span{margin-left:6px;padding:2px 6px;border-radius:999px;background:#e7f4ea;color:var(--green-800);font-size:7px;text-transform:uppercase;letter-spacing:.06em}

.activity-course-filter{display:flex;align-items:end;gap:9px}.activity-course-filter label{display:grid;gap:5px}.activity-course-filter label span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.activity-course-filter select{min-width:230px;min-height:40px;padding:0 36px 0 11px;border:1px solid var(--line);border-radius:11px;background:#fff}.activity-filter-chips{margin-bottom:8px}.categorized-activity-list article{align-items:flex-start}.activity-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.activity-title-row em{padding:3px 8px;border-radius:999px;background:var(--green-100);color:var(--green-900);font-size:8px;font-style:normal;font-weight:850;text-transform:uppercase;letter-spacing:.04em}

@media(max-width:900px){
  .group-chat-admin-header{align-items:flex-start;flex-direction:column}.group-course-picker{width:100%;min-width:0}.group-chat-messages{height:58dvh;min-height:430px}.activity-heading-responsive{align-items:flex-start;flex-direction:column}.activity-course-filter{width:100%}.activity-course-filter label{flex:1}.activity-course-filter select{width:100%;min-width:0}
}

@media(max-width:760px){
  .course-filter-chips{margin-left:-2px;margin-right:-2px;padding-bottom:11px}.course-filter-chips a{min-height:36px;padding:0 12px;font-size:10px}
  .task-filter{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.task-filter select{width:100%;min-width:0}.task-filter .btn{grid-column:1/-1}
  .app-submission-card{border-radius:18px}.submission-context strong{font-size:16px}.submission-context span{font-size:11px}.submission-answer p{font-size:13px;line-height:1.65}
  .admin-group-chat-card{border-radius:18px}.group-chat-admin-header{padding:14px}.group-chat-logo{width:44px;height:44px;flex-basis:44px}.group-chat-identity h2{font-size:19px}.group-chat-messages{height:calc(100dvh - 330px);min-height:420px;padding:14px 10px}.group-chat-messages .chat-message-row{max-width:90%}.group-chat-composer{padding:9px 10px calc(9px + env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) 48px}

  .class-group-chat:not(.is-mobile-open){margin:14px 12px 18px!important;border:1px solid var(--line);border-radius:18px!important;box-shadow:0 10px 28px rgba(25,57,44,.08)}
  .class-group-chat:not(.is-mobile-open) .group-chat-notice,.class-group-chat:not(.is-mobile-open) .live-chat-window,.class-group-chat:not(.is-mobile-open) .group-chat-composer{display:none}
  .class-group-chat:not(.is-mobile-open) .group-chat-header{border-bottom:0;border-radius:18px;padding:14px;cursor:pointer}.class-group-chat:not(.is-mobile-open) .group-chat-header::after{content:'Buka';display:grid;place-items:center;min-width:52px;height:32px;border-radius:999px;background:var(--green-900);color:#fff;font-size:9px;font-weight:850}.class-group-chat:not(.is-mobile-open) .chat-scroll-latest{display:none}
  .class-group-chat.is-mobile-open{position:fixed!important;z-index:160;inset:0;width:100%;height:100dvh;margin:0!important;border-radius:0!important;display:flex;flex-direction:column;background:#edf7ef;overflow:hidden}.class-group-chat.is-mobile-open .group-chat-header{flex:0 0 auto;grid-template-columns:38px 42px minmax(0,1fr) 36px;padding:9px 10px;background:#fff}.class-group-chat.is-mobile-open .group-chat-mobile-close{display:grid;place-items:center}.class-group-chat.is-mobile-open .chat-teacher-avatar{width:40px;height:40px}.class-group-chat.is-mobile-open .group-chat-header h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.class-group-chat.is-mobile-open .group-chat-header .eyebrow{font-size:7px}.class-group-chat.is-mobile-open .chat-connection{font-size:8px}.class-group-chat.is-mobile-open .group-chat-notice{flex:0 0 auto;padding:7px 12px;font-size:8.5px}.class-group-chat.is-mobile-open .live-chat-window{flex:1 1 auto;height:auto;min-height:0;max-height:none}.class-group-chat.is-mobile-open .group-chat-messages{height:100%;padding:15px 10px 20px}.class-group-chat.is-mobile-open .chat-message-row{max-width:88%}.class-group-chat.is-mobile-open .chat-bubble p{font-size:13.5px}.class-group-chat.is-mobile-open .group-chat-composer{position:relative;flex:0 0 auto;bottom:auto;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:#fff}.class-group-chat.is-mobile-open .chat-send-button{width:48px;min-width:48px;height:48px;border-radius:50%;padding:0}.class-group-chat.is-mobile-open .chat-send-button span{display:none}.class-group-chat.is-mobile-open .chat-input-wrap textarea{min-height:48px;padding:13px 16px;border-radius:24px;background:#f5f8f6}.class-group-chat.is-mobile-open + .lesson-pagination{display:none}
  body.group-chat-open{overflow:hidden}.group-chat-open .student-bottom-nav{display:none}

  .activity-course-filter{display:grid;grid-template-columns:1fr auto;align-items:end}.activity-course-filter .btn{min-height:40px}.activity-filter-chips{margin-top:4px}.categorized-activity-list article{padding:13px 10px}.activity-title-row{gap:5px}.activity-title-row em{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media(max-width:430px){
  .task-filter{grid-template-columns:1fr}.task-filter .btn{grid-column:auto}.group-chat-identity small{font-size:9px}.group-chat-messages .chat-bubble p{font-size:12.5px}.activity-course-filter{grid-template-columns:1fr}.activity-course-filter .btn{width:100%}
}

/* =========================================================
   TAHAP 9 — DISKUSI TERPISAH PER MATERI
   ========================================================= */
.lesson-topic-chat{margin-top:22px;overflow:hidden;border:1px solid rgba(26,78,58,.12);border-radius:24px;background:#edf7ef;box-shadow:0 16px 40px rgba(20,65,48,.09)}
.lesson-chat-header{grid-template-columns:52px minmax(0,1fr) auto;background:#fff}
.lesson-chat-heading{min-width:0}.lesson-chat-heading h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-chat-context{display:block;color:#6b7b72;font-size:10px;margin-bottom:4px}.lesson-chat-mobile-close{display:none;width:38px;height:38px;border:0;border-radius:50%;background:#eaf3ed;color:#174431;font-size:20px;place-items:center}
.lesson-chat-notice,.lesson-chat-admin-context{display:flex;align-items:flex-start;gap:10px;padding:11px 18px;border-bottom:1px solid rgba(24,76,56,.08);background:#fbfdfb;color:#64736b;font-size:10px;line-height:1.55}.lesson-chat-notice p,.lesson-chat-admin-context p{margin:0}.lesson-chat-notice span,.lesson-chat-admin-context span{font-size:16px}.lesson-chat-window{height:500px;min-height:340px;background:#edf7ef}.lesson-chat-messages{height:100%;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:10px;background-image:radial-gradient(rgba(42,91,69,.055) 1px,transparent 1px);background-size:19px 19px;overscroll-behavior:contain;scrollbar-width:thin}.lesson-chat-messages .chat-message-row{max-width:min(82%,620px)}.lesson-chat-messages .chat-bubble{border-radius:7px 17px 17px 17px;box-shadow:0 2px 8px rgba(21,63,47,.08)}.lesson-chat-messages .chat-message-row.is-mine .chat-bubble{border-radius:17px 7px 17px 17px;background:#d9f5e5}
.lesson-chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:11px 14px calc(11px + env(safe-area-inset-bottom));border-top:1px solid rgba(24,76,56,.1);background:#fff}.lesson-chat-composer textarea{width:100%;min-height:48px;max-height:128px;padding:13px 17px;border:1px solid #cddbd2;border-radius:25px;background:#f7faf8;color:var(--green-950);font:inherit;line-height:1.45;resize:none;outline:none}.lesson-chat-composer textarea:focus{border-color:var(--green-700);box-shadow:0 0 0 4px rgba(39,103,76,.09);background:#fff}.lesson-chat-send{min-width:96px;height:48px;padding:0 17px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:8px}.lesson-chat-send svg,.admin-lesson-chat-composer button svg{width:19px;height:19px;fill:currentColor}.lesson-chat-send.is-sending{opacity:.65}

.admin-lesson-chat-card{padding:0!important;overflow:hidden;border-radius:24px;background:#eef6f0}.lesson-chat-admin-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border-bottom:1px solid rgba(24,76,56,.1);background:#fff}.lesson-chat-admin-title{display:flex;align-items:center;gap:13px;min-width:0}.lesson-chat-admin-title h2{margin:1px 0 3px;color:var(--green-950);font:500 23px Georgia,serif}.lesson-chat-admin-title small{display:block;color:var(--muted);font-size:10px}.lesson-chat-pickers{display:grid;grid-template-columns:minmax(190px,1fr) minmax(240px,1.2fr);gap:10px;min-width:min(560px,52%)}.lesson-chat-pickers label{display:grid;gap:5px}.lesson-chat-pickers span{font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.12em;color:#769082}.lesson-chat-pickers select{width:100%;min-width:0;padding:10px 35px 10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fbf9;color:var(--green-950);font:inherit;font-size:11px;outline:none}.lesson-chat-pickers select:focus{border-color:var(--green-700);box-shadow:0 0 0 3px rgba(39,103,76,.08)}
.admin-lesson-chat-layout{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:620px}.admin-lesson-chat-nav{border-right:1px solid rgba(24,76,56,.09);background:#fff;overflow-y:auto;max-height:690px;padding-bottom:18px}.lesson-chat-nav-heading{display:grid;gap:2px;padding:18px 17px 13px;border-bottom:1px solid var(--line)}.lesson-chat-nav-heading strong{color:var(--green-950)}.lesson-chat-nav-heading small{font-size:9px;color:var(--muted)}.admin-lesson-chat-nav section{padding:12px 10px 0}.admin-lesson-chat-nav h3{margin:0 7px 7px;font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:#799185}.admin-lesson-chat-nav a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px 12px;border-radius:13px;color:#3e5148;text-decoration:none;font-size:10.5px}.admin-lesson-chat-nav a:hover{background:#f2f8f4}.admin-lesson-chat-nav a.is-active{background:#e3f2e8;color:var(--green-950);font-weight:800}.admin-lesson-chat-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-lesson-chat-nav a b{min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:#f0f5f2;color:#5e7468;font-size:8px}.admin-lesson-chat-nav a.is-active b{background:var(--green-900);color:#fff}
.admin-lesson-chat-stage{min-width:0;display:flex;flex-direction:column;background:#edf7ef}.admin-lesson-chat-messages{height:550px;overflow-y:auto;padding:22px 24px;display:flex;flex-direction:column;gap:10px;background-image:radial-gradient(rgba(42,91,69,.055) 1px,transparent 1px);background-size:19px 19px;overscroll-behavior:contain}.admin-lesson-chat-messages .chat-message-row{max-width:min(78%,680px)}.admin-lesson-chat-composer{margin-top:auto;grid-template-columns:minmax(0,1fr) 50px;padding:11px 14px calc(11px + env(safe-area-inset-bottom))}.admin-lesson-chat-composer button{width:50px;height:50px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--green-900);color:#fff;box-shadow:0 9px 20px rgba(29,81,62,.22);cursor:pointer}.admin-lesson-chat-composer button:hover{transform:translateY(-1px);background:#0d3928}.admin-lesson-chat-composer button:disabled{opacity:.55;cursor:wait}

@media (max-width:980px){
  .lesson-chat-admin-header{align-items:flex-start;flex-direction:column}.lesson-chat-pickers{width:100%;min-width:0}.admin-lesson-chat-layout{grid-template-columns:230px minmax(0,1fr)}
}
@media (max-width:760px){
  .lesson-topic-chat:not(.is-mobile-open){margin:14px 12px 18px!important;border-radius:19px!important;box-shadow:0 10px 28px rgba(25,57,44,.08)}
  .lesson-topic-chat:not(.is-mobile-open) .lesson-chat-notice,.lesson-topic-chat:not(.is-mobile-open) .lesson-chat-window,.lesson-topic-chat:not(.is-mobile-open) .lesson-chat-composer{display:none}
  .lesson-topic-chat:not(.is-mobile-open) .lesson-chat-header{grid-template-columns:43px minmax(0,1fr) auto;border-bottom:0;border-radius:19px;padding:14px;cursor:pointer}
  .lesson-topic-chat:not(.is-mobile-open) .lesson-chat-header::after{content:'Buka';display:grid;place-items:center;min-width:52px;height:32px;border-radius:999px;background:var(--green-900);color:#fff;font-size:9px;font-weight:850}.lesson-topic-chat:not(.is-mobile-open) .chat-scroll-latest{display:none}
  .lesson-topic-chat.is-mobile-open{position:fixed!important;z-index:160;inset:0;width:100%;height:100dvh;margin:0!important;border:0!important;border-radius:0!important;display:flex;flex-direction:column;background:#edf7ef;overflow:hidden}.lesson-topic-chat.is-mobile-open .lesson-chat-header{flex:0 0 auto;grid-template-columns:38px 42px minmax(0,1fr) 36px;padding:9px 10px;background:#fff}.lesson-topic-chat.is-mobile-open .lesson-chat-mobile-close{display:grid}.lesson-topic-chat.is-mobile-open .chat-teacher-avatar{width:40px;height:40px}.lesson-topic-chat.is-mobile-open .lesson-chat-heading h2{font-size:16px}.lesson-topic-chat.is-mobile-open .lesson-chat-heading .eyebrow{font-size:7px}.lesson-topic-chat.is-mobile-open .lesson-chat-context,.lesson-topic-chat.is-mobile-open .chat-connection{font-size:8px}.lesson-topic-chat.is-mobile-open .lesson-chat-notice{flex:0 0 auto;padding:7px 11px;font-size:8.5px}.lesson-topic-chat.is-mobile-open .lesson-chat-window{flex:1 1 auto;height:auto;min-height:0}.lesson-topic-chat.is-mobile-open .lesson-chat-messages{height:100%;padding:15px 10px 22px}.lesson-topic-chat.is-mobile-open .chat-message-row{max-width:89%}.lesson-topic-chat.is-mobile-open .chat-bubble p{font-size:13.5px}.lesson-topic-chat.is-mobile-open .lesson-chat-composer{position:relative;flex:0 0 auto;padding:8px 9px calc(10px + env(safe-area-inset-bottom));gap:8px}.lesson-topic-chat.is-mobile-open .lesson-chat-composer textarea{min-height:50px;padding:14px 16px;border-radius:25px;font-size:15px}.lesson-topic-chat.is-mobile-open .lesson-chat-send{width:50px;min-width:50px;height:50px;padding:0;border-radius:50%}.lesson-topic-chat.is-mobile-open .lesson-chat-send span{display:none}.lesson-topic-chat.is-mobile-open + .lesson-pagination{display:none}body.lesson-chat-open{overflow:hidden}.lesson-chat-open .student-bottom-nav{display:none}
  .lesson-chat-admin-header{padding:14px}.lesson-chat-admin-title h2{font-size:19px}.lesson-chat-pickers{grid-template-columns:1fr}.admin-lesson-chat-layout{display:block;min-height:0}.admin-lesson-chat-nav{max-height:none;border-right:0;border-bottom:1px solid var(--line);padding:8px;display:flex;gap:8px;overflow-x:auto}.lesson-chat-nav-heading{display:none}.admin-lesson-chat-nav section{display:flex;gap:7px;padding:0}.admin-lesson-chat-nav h3{display:none}.admin-lesson-chat-nav a{min-width:150px;padding:10px 12px;background:#fff;border:1px solid var(--line)}.admin-lesson-chat-stage{min-height:560px}.admin-lesson-chat-messages{height:calc(100dvh - 390px);min-height:390px;padding:14px 10px}.admin-lesson-chat-messages .chat-message-row{max-width:90%}.lesson-chat-admin-context{font-size:8.5px;padding:8px 11px}.admin-lesson-chat-composer{padding:8px 9px calc(10px + env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr) 50px}.admin-lesson-chat-composer textarea{font-size:14px}
}

/* =========================================================
   TAHAP 10 — PDF, PPT, DAN WEBSITE LANGSUNG DI MATERI
   ========================================================= */
.lesson-resource-builder{overflow:hidden}
.resource-section-heading{align-items:flex-start}
.lesson-resource-admin-list{display:grid;gap:14px;margin-top:16px}
.lesson-resource-admin-card{position:relative;border:1px solid var(--line);border-radius:18px;background:#fbfdfb;overflow:hidden}
.lesson-resource-admin-card>header{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);background:#f5faf6}
.resource-type-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#e2f1e7;font-size:23px}
.lesson-resource-admin-card>header strong{display:block;color:var(--green-950);font-size:14px}.lesson-resource-admin-card>header small{display:block;margin-top:3px;color:var(--muted);font-size:9px}
.lesson-resource-admin-card .admin-form{padding:17px 18px}.resource-delete-form{display:flex;justify-content:flex-end;padding:0 18px 16px}
.resource-upload-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:14px;align-items:end}.resource-file-field input[type=file]{padding:11px;background:#fff}.resource-position-field input{text-align:center}
.create-resource-panel{margin-top:18px;border:1px solid var(--line);border-radius:18px;background:#fafcf9;overflow:hidden}.create-resource-panel summary{cursor:pointer;padding:16px 18px;color:var(--green-950);font-weight:850;list-style:none}.create-resource-panel summary::-webkit-details-marker{display:none}.create-resource-panel[open] summary{border-bottom:1px solid var(--line);background:#f2f8f4}.create-resource-panel>.admin-form{padding:18px}
.resource-or{display:flex;align-items:center;gap:12px;margin:2px 0 12px;color:#8b9b92;font-size:9px;text-transform:uppercase;letter-spacing:.14em}.resource-or::before,.resource-or::after{content:"";height:1px;background:var(--line);flex:1}.resource-or span{padding:0 4px}
.resource-guidance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}.resource-guidance-grid>div{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:9px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}.resource-guidance-grid>div>span{grid-row:1/3;font-size:22px}.resource-guidance-grid strong{font-size:11px;color:var(--green-950)}.resource-guidance-grid small{font-size:8.5px;line-height:1.4;color:var(--muted)}
.resource-empty-state{margin-top:14px}

.lesson-material-hub{margin:0;border-radius:0;background:#f7faf8;border-bottom:1px solid rgba(24,76,56,.1);overflow:hidden}
.material-hub-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px 22px 12px;background:#fff}.material-hub-heading h2{margin:2px 0 0;color:var(--green-950);font:500 25px Georgia,serif}.material-hub-heading>span{display:grid;place-items:center;min-width:66px;height:32px;padding:0 12px;border-radius:999px;background:#e7f2ea;color:var(--green-900);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.material-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 22px 13px;background:#fff;scrollbar-width:thin;scroll-snap-type:x proximity}.material-tabs button{flex:0 0 auto;min-width:106px;max-width:190px;display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px 13px;border:1px solid var(--line);border-radius:14px;background:#f8fbf9;color:#617168;cursor:pointer;text-align:left;scroll-snap-align:start;transition:.18s ease}.material-tabs button>span{grid-row:1/3;font-size:20px}.material-tabs button b{font-size:10px;color:inherit}.material-tabs button small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;color:inherit;opacity:.78}.material-tabs button:hover{border-color:#98b4a4;background:#f0f7f2}.material-tabs button.is-active{border-color:var(--green-800);background:var(--green-900);color:#fff;box-shadow:0 9px 22px rgba(24,72,54,.18)}
.material-panels{background:#eaf3ed}.material-view-panel[hidden]{display:none!important}.material-view-panel{animation:materialFade .2s ease}.material-panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;background:#fff;border-top:1px solid rgba(24,76,56,.08);border-bottom:1px solid rgba(24,76,56,.09)}.material-panel-toolbar>div:first-child{min-width:0}.material-panel-toolbar span{display:block;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.11em;color:#789083}.material-panel-toolbar strong{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--green-950);font-size:13px}.material-panel-toolbar a,.material-panel-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:#f7faf8;color:var(--green-900);font:inherit;font-size:9px;font-weight:800;text-decoration:none;cursor:pointer}.material-panel-toolbar a:hover,.material-panel-toolbar button:hover{background:#e8f3eb;border-color:#9bb6a6}.material-toolbar-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.material-video-frame{border-radius:0!important;min-height:480px}.material-video-frame iframe,.material-video-frame video{min-height:480px}
.material-frame-shell{position:relative;width:100%;height:min(72vh,760px);min-height:520px;background:#dce7df;overflow:hidden}.material-frame-shell iframe{width:100%;height:100%;border:0;background:#fff}.material-frame-shell:fullscreen{height:100vh;min-height:100vh;background:#111}.material-frame-shell:fullscreen iframe{height:100vh}.material-frame-shell.is-expanded-fallback{position:fixed;z-index:220;inset:0;width:100vw;height:100dvh;min-height:100dvh;background:#111}.material-frame-shell.is-expanded-fallback iframe{height:100dvh}.material-viewer-open{overflow:hidden}
.material-embed-fallback{height:100%;display:grid;place-items:center;align-content:center;gap:10px;padding:30px;text-align:center;background:linear-gradient(145deg,#1b513d,#2e6d53);color:#fff}.material-embed-fallback>span{font-size:44px}.material-embed-fallback h3{margin:0;font:500 28px Georgia,serif}.material-embed-fallback p{margin:0 0 8px;opacity:.8}.material-frame-note{display:flex;align-items:center;min-height:38px;padding:8px 18px;background:#fff;color:#6c7a72;font-size:9px;line-height:1.45;border-top:1px solid rgba(24,76,56,.08)}
@keyframes materialFade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .resource-upload-row{grid-template-columns:1fr}.resource-position-field{max-width:130px}.resource-guidance-grid{grid-template-columns:1fr}.lesson-resource-admin-card>header{grid-template-columns:40px minmax(0,1fr);padding:14px}.lesson-resource-admin-card>header>.status{grid-column:2}.resource-type-icon{width:40px;height:40px}
  .lesson-material-hub{margin:0;border-radius:0}.material-hub-heading{padding:14px 14px 10px;align-items:center}.material-hub-heading h2{font-size:19px}.material-hub-heading .eyebrow{font-size:7px}.material-hub-heading>span{min-width:54px;height:28px;font-size:8px}.material-tabs{padding:0 12px 10px;gap:7px}.material-tabs button{min-width:92px;max-width:150px;padding:9px 10px;border-radius:12px;grid-template-columns:22px minmax(0,1fr)}.material-tabs button>span{font-size:18px}.material-tabs button b{font-size:9px}.material-tabs button small{font-size:7px}
  .material-panel-toolbar{padding:9px 10px;gap:9px}.material-panel-toolbar strong{font-size:11px}.material-toolbar-actions{gap:5px}.material-panel-toolbar a,.material-panel-toolbar button{min-height:32px;padding:0 9px;font-size:8px}.material-panel-toolbar button span{display:none}.material-video-frame,.material-video-frame iframe,.material-video-frame video{min-height:245px}.material-frame-shell{height:62dvh;min-height:420px}.material-frame-note{padding:7px 11px;font-size:8px}.material-embed-fallback h3{font-size:23px}
}
@media(max-width:430px){
  .material-hub-heading h2{max-width:240px}.material-panel-toolbar{align-items:flex-start}.material-toolbar-actions{flex-direction:column;align-items:stretch}.material-panel-toolbar a,.material-panel-toolbar button{white-space:nowrap}.material-frame-shell{height:58dvh;min-height:390px}
}

/* Integrasi pendaftaran dan aktivasi akun */
.soft-info-card{background:#edf5ef;border:1px solid #d6e7da;border-radius:16px;padding:18px;color:#244d3d;line-height:1.65}
.status-provisioned,.status-sent,.status-paid,.status-success,.status-completed{background:#e8f7ec!important;color:#176b35!important}
.status-processing,.status-pending,.status-new{background:#fff5d9!important;color:#7a5d08!important}
.status-failed,.status-expired,.status-inactive{background:#fde9e7!important;color:#9a3028!important}
.status-pending_activation{background:#edf0ff!important;color:#4052a6!important}

/* Identitas DANA EDUKASI */
.brand-logo-wrap {
  background: linear-gradient(145deg, #1e76e6, #0b3b82) !important;
  box-shadow: 0 10px 30px rgba(11, 59, 130, .26) !important;
}

.brand-logo-wrap .brand-logo { display: none !important; }

.brand-logo-wrap::after {
  content: "1";
  color: #fff;
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.auth-page { background: linear-gradient(135deg, #092d62, #1768cf); }
.auth-panel { background: #f4f8ff; }
.auth-story .eyebrow { color: #dcecff; }
.eyebrow { color: #1768cf; }

/* Foto pengajar dan banner masuk DANA EDUKASI */
.auth-hero-image {
  width: min(64%, 680px);
  max-height: 88vh;
  right: -1%;
  bottom: -8%;
  object-position: right bottom;
}

.dana-education-banner { max-width: 420px; }
.dana-education-banner div { min-width: 0; }
.dana-education-banner strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.math-captcha {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(94px, 122px) 34px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d3e2f8;
  border-radius: 16px;
  background: linear-gradient(145deg, #f9fcff, #edf5ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(24,83,146,.07);
}
.math-captcha-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #287be0, #0b4ca2);
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(22,104,207,.24);
}
.math-captcha-copy { min-width: 0; }
.math-captcha-copy strong,
.math-captcha-copy span { display: block; }
.math-captcha-copy strong { color: #173a73; font-size: 12px; }
.math-captcha-copy span { margin-top: 3px; color: #60708a; font-size: 11px; line-height: 1.35; }
.math-captcha-copy b { color: #0b4ca2; font-weight: 900; }
.math-captcha-answer input {
  width: 100%;
  height: 43px;
  padding: 0 10px;
  border: 1px solid #b8d1f1;
  border-radius: 11px;
  outline: 0;
  background: #fff;
  color: #163e71;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
.math-captcha-answer input::placeholder { color: #91a4bd; font-weight: 600; }
.math-captcha-answer input:focus { border-color: #2378e0; box-shadow: 0 0 0 3px rgba(35,120,224,.16); }
.math-captcha-refresh {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #e3efff;
  color: #1b61ba;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
}
.math-captcha-refresh:hover { background: #d2e5ff; }
.math-captcha-refresh:focus-visible { outline: 3px solid #80b4ff; outline-offset: 2px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 500px) {
  .math-captcha { grid-template-columns: 42px minmax(0, 1fr) 34px; }
  .math-captcha-answer { grid-column: 2 / 4; }
}

@media (max-width: 1150px) {
  .auth-hero-image { width: min(70%, 650px); right: -10%; bottom: -6%; }
}

/* ===== DANA EDUKASI — pembaruan UI biru dan putih ===== */
:root {
  --green-950: #082b63;
  --green-900: #0b4da2;
  --green-800: #146fd6;
  --green-700: #0d5fbd;
  --green-100: #eaf3ff;
  --green-50: #f5f9ff;
  --cream: #f8fbff;
  --cream-2: #eef5ff;
  --ink: #112343;
  --muted: #5d6f8d;
  --line: #d9e5f4;
  --success: #14704b;
  --success-bg: #e8f8ef;
  --shadow: 0 20px 55px rgba(10, 58, 136, .12);
}

body,
.dashboard-page,
.learning-page,
body.mobile-app-page { background: #f4f8fe; }

.content-card,
.stat-card,
.course-card,
.lesson-card,
.auth-card { border-color: #dbe7f5; box-shadow: 0 14px 38px rgba(13, 61, 137, .07); }

.btn-primary,
.student-bottom-nav .is-accent,
.admin-menu-toggle { background: linear-gradient(135deg, #0b4da2, #1678e2); }

.btn-primary:hover { background: linear-gradient(135deg, #083c82, #1169c9); }

.dashboard-page { color: var(--ink); }
.sidebar {
  background:
    radial-gradient(circle at 5% 5%, rgba(89, 171, 255, .2), transparent 25%),
    linear-gradient(180deg, #082b63 0%, #0b438e 100%);
  box-shadow: 18px 0 45px rgba(6, 42, 96, .10);
}
.brand-sidebar small,
.sidebar-label { color: #b7d7ff; }
.sidebar-label { margin-top: 32px; }
.nav-list a { color: rgba(238, 247, 255, .78); }
.nav-list a:hover { background: rgba(159, 211, 255, .12); }
.nav-list a.active {
  background: linear-gradient(135deg, rgba(72, 157, 245, .38), rgba(37, 104, 192, .32));
  border-color: rgba(190, 225, 255, .22);
  box-shadow: inset 3px 0 0 #8ed1ff, 0 10px 22px rgba(0, 23, 67, .14);
}
.nav-icon { border-radius: 10px; background: rgba(255, 255, 255, .10); }
.nav-list a.active .nav-icon { background: rgba(255, 255, 255, .18); }
.sidebar-help { border-color: rgba(190, 225, 255, .15); background: rgba(255, 255, 255, .07); }
.sidebar-help p,
.sidebar-logout button { color: rgba(239, 247, 255, .84); }
.sidebar-logout button { border-color: rgba(190, 225, 255, .22); }

.topbar { border-bottom-color: #dce8f5; }
.profile-chip { border-color: #d8e5f4; box-shadow: 0 8px 20px rgba(10, 57, 128, .04); }
.hero-card,
.refined-welcome {
  background:
    radial-gradient(circle at 88% 10%, rgba(152, 211, 255, .28), transparent 22%),
    linear-gradient(135deg, #082b63 0%, #0b4da2 54%, #1878db 100%) !important;
}
.hero-card .eyebrow,
.refined-welcome .eyebrow { color: #c7e6ff; }
.welcome-points span { border-color: rgba(210, 237, 255, .25); background: rgba(255, 255, 255, .10); color: #eef8ff; }
.welcome-orbit { background: rgba(175, 221, 255, .12); }
.stat-card { background: linear-gradient(145deg, #fff, #f8fbff); }
.stat-card small { color: #7787a1; }
.eyebrow { color: #146fd6; }

.admin-form select,
.search-form input,
.field input,
.field textarea,
.participant-course-form select,
.participant-course-form input {
  border-color: #d5e2f1;
  background: #fff;
}
.admin-form select:focus,
.search-form input:focus,
.field input:focus,
.field textarea:focus,
.participant-course-form select:focus,
.participant-course-form input:focus {
  border-color: #146fd6;
  box-shadow: 0 0 0 4px rgba(20, 111, 214, .13);
}
.check-row input { accent-color: #146fd6; }
table thead { background: #f8fbff; }
th { color: #5b6d8a; }
tr:hover td { background: #f9fcff; }
.participant-course-form { border-color: #c9def7; background: #f4f9ff; box-shadow: 0 10px 24px rgba(13, 79, 166, .08); }
.participant-course-editor summary,
.link-button { color: #0d5fbd; }

.student-page { background: #f4f8fe; }
.student-header,
.learning-header {
  border-bottom-color: #d9e5f4;
  box-shadow: 0 9px 26px rgba(8, 53, 122, .06);
}
.course-count-badge,
.course-batch-label,
.header-home-link,
.soft-badge { background: #eaf3ff; color: #0b4da2; }
.course-card { box-shadow: 0 15px 35px rgba(10, 56, 128, .08); }
.refined-course-card:hover { box-shadow: 0 24px 55px rgba(12, 72, 158, .15); }
.course-cover {
  background:
    radial-gradient(circle at 72% 25%, rgba(255, 255, 255, .45), transparent 20%),
    linear-gradient(135deg, #cfe5ff, #eaf4ff);
}
.course-progress-pill { background: rgba(8, 43, 99, .88) !important; }
.progress-track { background: #dce9f7; }
.progress-track span,
.learning-progress span,
.mini-progress span { background: linear-gradient(90deg, #0b4da2, #2d92f0); }

.learning-page { background: #f3f8fe; }
.curriculum-sidebar { background: linear-gradient(180deg, #082b63, #0b438e) !important; }
.curriculum-top { border-bottom-color: rgba(194, 226, 255, .18); }
.curriculum-nav a:hover { background: rgba(174, 219, 255, .12); }
.curriculum-nav a.active { background: rgba(89, 163, 240, .25); border-color: rgba(194, 226, 255, .20); }
.lesson-video,
.material-embed-fallback { background: linear-gradient(135deg, #071f4a, #0b4da2) !important; }
.lesson-card { box-shadow: 0 14px 34px rgba(10, 56, 128, .09); }
.lesson-prose,
.comment-body > p,
.discussion-body { color: #354968; }
.lesson-content,
.student-assignment-section,
.lesson-discussion { background: #fff; }
.assignment-instructions,
.comment-body,
.review-form { background: #f4f8fe; }
.student-assignment-card,
.discussion-empty { border-color: #d8e5f4; }
.student-upload-zone { border-color: #aacbf0; background: #f6faff; }
.student-assignment-form textarea:focus,
.student-comment-form textarea:focus { border-color: #146fd6; box-shadow: 0 0 0 4px rgba(20, 111, 214, .12); }

.lesson-material-hub { background: #f5f9ff; border-bottom-color: #d9e5f4; }
.material-hub-heading,
.material-tabs,
.material-panel-toolbar,
.material-frame-note { background: #fff; }
.material-hub-heading > span { background: #eaf3ff; color: #0b4da2; }
.material-tabs button { border-color: #d9e5f4; background: #f8fbff; color: #526784; }
.material-tabs button:hover { border-color: #9fc6f2; background: #eef6ff; }
.material-tabs button.is-active { border-color: #0d5fbd; background: #0b4da2; box-shadow: 0 9px 22px rgba(11, 77, 162, .22); }
.material-panels { background: #eaf3ff; }
.material-panel-toolbar { border-color: rgba(10, 75, 162, .10); }
.material-panel-toolbar span { color: #667fa4; }
.material-panel-toolbar a,
.material-panel-toolbar button { background: #f5f9ff; color: #0b4da2; }
.material-panel-toolbar a:hover,
.material-panel-toolbar button:hover { background: #e8f3ff; border-color: #9dc5f3; }

.live-chat-window,
.admin-lesson-chat-stage,
.class-group-chat .live-chat-window { background: #edf6ff; }
.chat-message-row.is-mine .chat-bubble,
.class-group-chat .chat-message-row.is-mine .chat-bubble { background: #dceeff; }
.chat-bubble { background: #fff; border: 1px solid #dbe7f5; }
.chat-bubble p { color: #2f4665; }
.lesson-chat-composer,
.group-chat-composer,
.admin-live-chat-composer { border-top-color: rgba(11, 77, 162, .12); }
.lesson-chat-composer textarea,
.group-chat-composer textarea,
.admin-live-chat-composer textarea,
.chat-input-wrap textarea { border-color: #cbdcf0; background: #f7fbff; color: #17375f; }
.lesson-chat-composer textarea:focus,
.group-chat-composer textarea:focus,
.admin-live-chat-composer textarea:focus,
.chat-input-wrap textarea:focus { border-color: #146fd6; box-shadow: 0 0 0 4px rgba(20, 111, 214, .10); }
.lesson-chat-send,
.group-chat-composer button,
.admin-live-chat-composer button,
.chat-send-button { background: #0b4da2; box-shadow: 0 9px 20px rgba(11, 77, 162, .22); }

.student-bottom-nav { border-color: rgba(11, 77, 162, .12); box-shadow: 0 18px 45px rgba(7, 54, 127, .18); }
.student-bottom-nav a,
.student-bottom-nav button { color: #62738c; }
.student-bottom-nav .is-active { background: #eaf3ff; color: #0b4da2; }
.student-bottom-nav .is-accent { color: #fff; box-shadow: 0 9px 20px rgba(11, 77, 162, .22); }
.bottom-nav-icon { display: grid; width: 22px; height: 22px; place-items: center; }
.bottom-nav-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.student-bottom-nav .is-accent .bottom-nav-icon svg { fill: currentColor; stroke: currentColor; }

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid #85bdf7; outline-offset: 3px; }

@media (max-width: 760px) {
  body.mobile-app-page { background: #f5f9ff; }
  .student-bottom-nav { left: 8px; right: 8px; bottom: calc(7px + env(safe-area-inset-bottom)); border-radius: 20px; }
  .student-bottom-nav a,
  .student-bottom-nav button { border-radius: 14px; }
  .student-bottom-nav small { font-size: 10px; letter-spacing: .01em; }
  .learning-header { background: rgba(255, 255, 255, .97); }
  .lesson-main { padding-left: 10px; padding-right: 10px; }
  .lesson-card { border-radius: 18px; }
  .lesson-content h1 { font-size: clamp(30px, 9vw, 38px); }
  .material-panel-toolbar a,
  .material-panel-toolbar button { font-size: 9px; }
  .mobile-sheet-backdrop,
  .curriculum-backdrop { background: rgba(5, 31, 75, .50); }
}

@media (max-width: 430px) {
  .student-bottom-nav { height: 67px; }
  .student-bottom-nav small { font-size: 9px; }
  .bottom-nav-icon svg { width: 19px; height: 19px; }
  .material-tabs button { min-width: 98px; }
}

.auth-register-link{margin:16px 0 0;text-align:center;color:#75899f;font-size:12px;line-height:1.6}.auth-register-link a{color:#0a62bd;font-weight:800;text-decoration:none}

/* DANA EDUKASI — katalog publik dan pembelian kelas */
.public-page{margin:0;background:#f5f9ff;color:#12345f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.public-header{position:sticky;top:0;z-index:20;height:78px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,76px);border-bottom:1px solid rgba(14,79,160,.1);background:rgba(255,255,255,.94);backdrop-filter:blur(18px)}.public-brand{display:flex;align-items:center;gap:10px;color:#062c62;text-decoration:none}.public-brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#0a77dc,#063d91);color:#fff;font-family:Georgia,serif;font-size:24px;font-weight:800;box-shadow:0 10px 22px rgba(8,83,175,.25)}.public-brand small{display:block;color:#67809e;font-size:9px;font-weight:800;letter-spacing:.16em;line-height:1.1}.public-brand strong{display:block;margin-top:2px;font-family:Georgia,serif;font-size:21px;line-height:1}.public-nav{display:flex;align-items:center;gap:25px}.public-nav a{color:#395675;text-decoration:none;font-size:14px;font-weight:650}.public-nav a:hover{color:#0759ba}.public-nav .public-nav-action{padding:11px 16px;border:1px solid #bed8f4;border-radius:11px;background:#f7fbff;color:#0759ba;box-shadow:0 6px 14px rgba(11,86,178,.08)}.public-main{min-height:calc(100vh - 78px);padding:0 clamp(20px,5vw,76px)}.public-alert{max-width:1200px;margin:20px auto 0;padding:14px 17px;border-radius:14px;font-size:14px;font-weight:650}.public-alert-success{border:1px solid #b9e9d1;background:#edfff4;color:#12683e}.public-alert-error{border:1px solid #f4c5c5;background:#fff4f4;color:#a52f35}.public-hero{max-width:1260px;min-height:520px;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(380px,.96fr);gap:35px;align-items:center;margin:0 auto;padding:72px 0 85px}.public-kicker{margin:0 0 13px;color:#0b66c4;font-size:11px;font-weight:850;letter-spacing:.15em;line-height:1.4}.public-hero .public-kicker{display:flex;align-items:center;gap:9px}.public-hero .public-kicker span{display:inline-block;width:30px;height:2px;background:#0d70d5}.public-hero h1,.public-course-hero h1,.public-register-aside h1{max-width:720px;margin:0;color:#092c5b;font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,5.3vw,72px);font-weight:500;line-height:1.02;letter-spacing:-.05em}.public-hero-copy>p:not(.public-kicker){max-width:610px;margin:24px 0 0;color:#597391;font-size:17px;line-height:1.8}.public-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.public-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:49px;box-sizing:border-box;padding:0 20px;border:0;border-radius:13px;font:700 14px/1 Inter,ui-sans-serif,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.public-btn:hover{transform:translateY(-2px)}.public-btn-primary{background:linear-gradient(135deg,#0757b7,#147ade);color:#fff;box-shadow:0 13px 28px rgba(7,83,181,.23)}.public-btn-primary:hover{box-shadow:0 18px 33px rgba(7,83,181,.31)}.public-btn-secondary{border:1px solid #bed8f4;background:#fff;color:#0a5ab9}.public-btn-light{background:#fff;color:#084990;box-shadow:0 13px 30px rgba(0,25,78,.18)}.public-btn-full{width:100%;min-height:55px}.public-btn-mini{min-height:38px;padding:0 13px;border-radius:10px;font-size:12px}.public-trust-row{display:flex;flex-wrap:wrap;gap:15px 22px;margin-top:34px;color:#57708d;font-size:12px;font-weight:650}.public-trust-row b{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:5px;border-radius:50%;background:#d8efff;color:#0870d2;font-size:10px}.public-hero-visual{position:relative;min-height:390px;overflow:hidden;border-radius:38px;background:linear-gradient(145deg,#d9edff 0%,#8fc8f8 49%,#287bd0 100%);box-shadow:0 26px 60px rgba(4,61,136,.2)}.public-hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(127deg,rgba(255,255,255,.55),transparent 42%,rgba(1,48,112,.2));}.public-orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.42)}.public-orb-one{right:-60px;top:-80px;width:280px;height:280px}.public-orb-two{left:-110px;bottom:-140px;width:300px;height:300px}.public-lesson-window{position:absolute;z-index:1;top:75px;left:clamp(28px,8%,70px);right:clamp(28px,8%,70px);overflow:hidden;border:1px solid rgba(255,255,255,.7);border-radius:19px;background:rgba(255,255,255,.92);box-shadow:0 25px 44px rgba(1,47,110,.21)}.window-top{display:flex;align-items:center;gap:5px;height:37px;padding:0 14px;border-bottom:1px solid #e4effa}.window-top i{width:7px;height:7px;border-radius:50%;background:#bbd2e7}.window-top span{margin-left:7px;color:#7c95ae;font-size:9px}.window-body{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:25px 24px 21px}.window-play{display:grid;place-items:center;width:47px;height:47px;border-radius:15px;background:linear-gradient(145deg,#0870d8,#0952ad);color:#fff;font-size:16px;box-shadow:0 8px 18px rgba(7,91,190,.25)}.window-body strong{display:block;color:#12375f;font-size:15px}.window-body small{display:block;margin-top:5px;color:#708aa5;font-size:11px}.window-progress{grid-column:1/-1;height:7px;overflow:hidden;border-radius:100px;background:#e4eef8}.window-progress span{display:block;width:68%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0871d9,#62b8ff)}.public-float-card{position:absolute;z-index:2;right:21px;bottom:28px;display:flex;align-items:center;gap:10px;padding:12px 15px;border:1px solid rgba(255,255,255,.66);border-radius:15px;background:rgba(255,255,255,.83);box-shadow:0 14px 27px rgba(0,52,116,.16)}.public-float-card>span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#d7efff;color:#0870d4}.public-float-card small,.public-float-card strong{display:block}.public-float-card small{color:#7891aa;font-size:9px}.public-float-card strong{margin-top:2px;color:#104575;font-size:12px}.public-catalog-section,.public-faq{max-width:1260px;margin:0 auto;padding:76px 0}.public-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:27px}.public-section-heading h2,.public-steps h2,.public-detail-banner h2,.public-preview-cta h2{margin:0;color:#0c315f;font-family:Georgia,"Times New Roman",serif;font-size:clamp(31px,3.4vw,44px);font-weight:500;letter-spacing:-.035em}.public-section-heading p:not(.public-kicker){margin:9px 0 0;color:#69819d;font-size:14px}.public-section-heading>span{padding:9px 12px;border-radius:10px;background:#e6f3ff;color:#1064be;font-size:12px;font-weight:750}.public-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.public-course-card{overflow:hidden;border:1px solid #dce9f7;border-radius:21px;background:#fff;box-shadow:0 12px 30px rgba(8,69,145,.07);transition:transform .2s ease,box-shadow .2s ease}.public-course-card:hover{transform:translateY(-4px);box-shadow:0 21px 43px rgba(8,69,145,.13)}.public-course-image{position:relative;display:block;height:205px;background:linear-gradient(135deg,#d8edff,#86bff4)}.public-course-image img{width:100%;height:100%;object-fit:cover}.public-price-badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:9px;font-size:11px;font-weight:800}.public-course-image .public-price-badge{position:absolute;top:13px;right:13px;box-shadow:0 5px 12px rgba(3,40,94,.13)}.public-price-badge.is-paid{background:#073b83;color:#fff}.public-price-badge.is-free{background:#e0f6eb;color:#087646}.public-course-body{padding:20px}.public-course-meta{display:flex;flex-wrap:wrap;gap:7px;color:#5c7b9c;font-size:11px;font-weight:700}.public-course-meta span{padding:5px 7px;border-radius:7px;background:#f0f7ff}.public-course-body h3{margin:13px 0 8px;color:#113961;font-family:Georgia,"Times New Roman",serif;font-size:26px;font-weight:500;line-height:1.08}.public-course-body h3 a{color:inherit;text-decoration:none}.public-course-body>p{min-height:64px;margin:0;color:#617b96;font-size:13px;line-height:1.65}.public-course-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.public-text-link{color:#0a65c6;font-size:12px;font-weight:800;text-decoration:none}.public-text-link span{margin-left:3px;font-size:16px}.public-empty{padding:52px 25px;text-align:center;border:1px dashed #b6d4f2;border-radius:22px;background:#fff}.public-empty>span{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 13px;border-radius:14px;background:#e8f4ff;color:#0c68c7;font-size:27px}.public-empty h3{margin:0;color:#17416d;font-family:Georgia,serif;font-size:27px;font-weight:500}.public-empty p{margin:8px auto 0;max-width:480px;color:#7087a1;font-size:14px}.public-steps{display:grid;grid-template-columns:.78fr 1.22fr;gap:40px;align-items:center;max-width:1260px;margin:6px auto 0;padding:56px clamp(25px,5vw,66px);border-radius:28px;background:linear-gradient(135deg,#073a80,#075cae);color:#fff;box-shadow:0 23px 48px rgba(3,53,124,.2)}.public-steps h2{color:#fff}.public-steps>div>p:not(.public-kicker){margin:13px 0 0;color:#cde7ff;font-size:14px;line-height:1.7}.public-steps .public-kicker{color:#a9d5ff}.public-steps ol{display:grid;grid-template-columns:1fr 1fr;gap:19px;list-style:none;margin:0;padding:0}.public-steps li{display:flex;gap:10px}.public-steps li>span{display:grid;flex:0 0 auto;place-items:center;width:31px;height:31px;border:1px solid rgba(255,255,255,.42);border-radius:10px;background:rgba(255,255,255,.13);font-size:12px;font-weight:800}.public-steps li strong{font-size:13px}.public-steps li p{margin:5px 0 0;color:#c7e2fb;font-size:11px;line-height:1.55}.public-faq{padding-bottom:90px}.public-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.public-faq details{padding:0 19px;border:1px solid #d9e7f6;border-radius:15px;background:#fff}.public-faq summary{padding:19px 0;cursor:pointer;color:#183e68;font-size:14px;font-weight:750}.public-faq p{margin:0 0 19px;color:#657e99;font-size:13px;line-height:1.75}.public-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px clamp(20px,5vw,76px);border-top:1px solid #dbe8f6;background:#fff;color:#5e7995}.public-footer div{display:grid;gap:4px}.public-footer strong{color:#0d3b6f;font-size:13px;letter-spacing:.08em}.public-footer span{font-size:11px}.public-footer a{color:#0863c4;font-size:12px;font-weight:750;text-decoration:none}

.public-course-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);gap:45px;align-items:center;max-width:1180px;margin:0 auto;padding:54px 0 58px}.public-back-link{display:inline-flex;margin-bottom:24px;color:#477094;font-size:13px;font-weight:700;text-decoration:none}.public-back-link:hover{color:#075bbc}.public-price-line{display:flex;align-items:center;gap:11px;margin-bottom:15px;color:#6e85a0;font-size:12px;font-weight:700}.public-course-hero-copy>p:not(.public-kicker){max-width:620px;margin:21px 0 0;color:#627c98;font-size:16px;line-height:1.75}.public-detail-cta{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:30px}.public-detail-cta small{color:#527391;font-size:11px;font-weight:650}.public-detail-cta small span{color:#0c9c62}.public-course-hero-image{position:relative;min-height:337px;overflow:hidden;border-radius:24px;background:#d6eaff;box-shadow:0 20px 40px rgba(8,60,128,.16)}.public-course-hero-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.public-image-shade{position:absolute;inset:0;background:linear-gradient(20deg,rgba(2,39,92,.65),transparent 58%)}.public-hero-price{position:absolute;left:18px;bottom:18px;padding:10px 13px;border-radius:11px;background:#fff;color:#0c4890;font-size:15px;font-weight:850;box-shadow:0 9px 20px rgba(0,0,0,.18)}.public-curriculum-section{max-width:1100px;margin:0 auto;padding:62px 0 86px}.public-module-list{display:grid;gap:14px}.public-module-card{overflow:hidden;border:1px solid #d9e7f6;border-radius:18px;background:#fff}.public-module-card header{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px 20px;border-bottom:1px solid #e8f1fa}.public-module-card header>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#e6f3ff;color:#0964c4;font-size:11px;font-weight:850}.public-module-card header small{display:block;color:#6490bc;font-size:9px;font-weight:800;letter-spacing:.13em}.public-module-card header h3{margin:3px 0 0;color:#16416c;font-size:16px}.public-module-card header b{color:#7890a9;font-size:11px}.public-module-card ul{list-style:none;margin:0;padding:0}.public-module-card li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px 20px;border-bottom:1px solid #eff5fb}.public-module-card li:last-child{border-bottom:0}.public-lesson-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;font-size:12px}.is-open .public-lesson-icon{background:#e1f4ff;color:#0870d0}.is-locked .public-lesson-icon{background:#f0f3f8;color:#8da1b8}.public-module-card li strong,.public-module-card li small{display:block}.public-module-card li strong{overflow:hidden;color:#234b75;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.public-module-card li small{margin-top:3px;color:#8198ad;font-size:10px}.public-module-card li a{color:#0963c5;font-size:11px;font-weight:800;text-decoration:none}.public-lock-label{padding:6px 8px;border-radius:7px;background:#f2f5f8;color:#8498ad;font-size:10px;font-weight:750}.public-detail-banner{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1100px;margin:0 auto 85px;padding:39px 45px;border-radius:25px;background:linear-gradient(135deg,#063b82,#0b75d6);color:#fff}.public-detail-banner h2{color:#fff;font-size:34px}.public-detail-banner>div>p:not(.public-kicker){max-width:650px;margin:10px 0 0;color:#cae6ff;font-size:14px;line-height:1.7}.public-detail-banner .public-kicker{color:#b8e0ff}

.public-preview-head{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1000px;margin:0 auto;padding:28px 0 16px}.public-preview-head .public-back-link{margin:0}.public-preview-head div{display:grid;gap:4px;text-align:right}.public-preview-head span{color:#0d6ac9;font-size:9px;font-weight:850;letter-spacing:.14em}.public-preview-head strong{color:#426588;font-size:12px}.public-preview-lesson{max-width:1000px;margin:0 auto 27px;overflow:hidden;border:1px solid #dbe9f7;border-radius:23px;background:#fff;box-shadow:0 15px 36px rgba(8,59,126,.08)}.public-preview-lesson>header{padding:38px clamp(22px,5vw,54px) 25px}.public-preview-lesson h1{margin:0;color:#103863;font-family:Georgia,serif;font-size:clamp(33px,5vw,52px);font-weight:500;letter-spacing:-.04em}.public-preview-lesson header>p:not(.public-kicker){max-width:680px;margin:14px 0 0;color:#627b96;font-size:14px;line-height:1.7}.public-preview-video{width:calc(100% - clamp(44px,10vw,108px));margin:0 auto;overflow:hidden;border-radius:16px;background:#062c63;aspect-ratio:16/9}.public-preview-video iframe,.public-preview-video video{width:100%;height:100%;border:0;object-fit:cover}.public-video-link{display:block;width:fit-content;margin:0 auto;padding:14px 20px;border-radius:11px;background:#e8f4ff;color:#075dbc;font-size:13px;font-weight:750;text-decoration:none}.public-preview-prose{padding:36px clamp(22px,5vw,54px) 46px;color:#2e4c6b;font-size:16px;line-height:1.85}.public-preview-prose a{color:#0765c6;font-weight:700}.public-preview-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;max-width:1000px;margin:0 auto 82px;padding:30px 35px;border:1px solid #cfe3f7;border-radius:20px;background:#eaf5ff}.public-preview-cta h2{font-size:31px}.public-preview-cta p:not(.public-kicker){max-width:620px;margin:9px 0 0;color:#5e7a95;font-size:13px;line-height:1.7}

.public-register-shell{display:grid;grid-template-columns:.93fr 1.07fr;max-width:1080px;margin:0 auto;padding:54px 0 76px;overflow:hidden;border:1px solid #d6e6f7;border-radius:27px;background:#fff;box-shadow:0 20px 48px rgba(7,58,128,.1)}.public-register-aside{padding:44px clamp(28px,4.5vw,55px);background:linear-gradient(150deg,#062f69,#0962bd);color:#fff}.public-register-aside .public-back-link{color:#d4ebff}.public-register-aside .public-kicker{margin-top:18px;color:#aedaFF}.public-register-aside h1{color:#fff;font-size:clamp(37px,4.2vw,55px)}.public-register-aside>p:not(.public-kicker){margin:18px 0 0;color:#c9e5ff;font-size:14px;line-height:1.75}.public-register-course-card{display:flex;align-items:center;gap:13px;margin-top:30px;padding:12px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(255,255,255,.12)}.public-register-course-card img{width:56px;height:56px;border-radius:11px;object-fit:cover}.public-register-course-card small,.public-register-course-card strong{display:block}.public-register-course-card small{color:#c3e3ff;font-size:10px}.public-register-course-card strong{margin-top:4px;font-size:18px}.public-register-aside ul{display:grid;gap:12px;list-style:none;margin:30px 0 0;padding:0;color:#d3eaff;font-size:12px}.public-register-aside li span{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:6px;border-radius:50%;background:rgba(255,255,255,.17);color:#fff;font-size:9px}.public-register-card{padding:45px clamp(28px,5.1vw,64px)}.public-form-heading h2{margin:0;color:#133c68;font-family:Georgia,serif;font-size:38px;font-weight:500;letter-spacing:-.04em}.public-form-heading>p:not(.public-kicker){margin:10px 0 0;color:#7088a2;font-size:13px;line-height:1.7}.public-account-note{display:grid;grid-template-columns:31px minmax(0,1fr) auto;gap:9px;align-items:center;margin:22px 0;padding:12px;border:1px solid #cde7f5;border-radius:13px;background:#f1faff}.public-account-note>span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#d7f5e4;color:#098751;font-size:13px}.public-account-note strong,.public-account-note small{display:block}.public-account-note strong{color:#174b79;font-size:12px}.public-account-note small{margin-top:2px;overflow:hidden;color:#718aa4;font-size:10px;text-overflow:ellipsis}.public-account-note a{color:#0a64c5;font-size:10px;font-weight:800;text-decoration:none}.public-form{display:grid;gap:16px;margin-top:24px}.public-form>label{display:grid;gap:7px}.public-form>label>span{color:#31536f;font-size:12px;font-weight:800}.public-form input{width:100%;box-sizing:border-box;min-height:51px;padding:0 14px;border:1px solid #ccddec;border-radius:12px;background:#fff;color:#153c65;font:14px Inter,ui-sans-serif,system-ui,sans-serif;outline:0}.public-form input:focus{border-color:#0a6dce;box-shadow:0 0 0 4px rgba(10,109,206,.1)}.public-form input[readonly]{background:#f4f8fc;color:#607d9d}.public-form small{color:#778fa8;font-size:10px;line-height:1.55}.public-math-captcha{display:grid;grid-template-columns:36px minmax(0,1fr) 68px 27px;gap:9px;align-items:center;padding:10px;border:1px solid #b9dcfa;border-radius:14px;background:linear-gradient(135deg,#eff9ff,#f8fcff)}.public-captcha-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#0870d2;color:#fff;font-size:21px;font-weight:500}.public-math-captcha strong,.public-math-captcha span{display:block}.public-math-captcha strong{color:#164871;font-size:11px}.public-math-captcha div>span{margin-top:2px;color:#66829e;font-size:10px}.public-math-captcha input{min-height:39px;padding:0 8px;text-align:center;border-radius:9px}.public-math-captcha button{width:27px;height:27px;border:0;border-radius:8px;background:#d8edff;color:#0a64c3;font-size:17px;cursor:pointer}.public-form-login{margin:0;text-align:center;color:#7089a3;font-size:11px}.public-form-login a{color:#0864c5;font-weight:800;text-decoration:none}

.public-checkout-shell{max-width:1030px;margin:0 auto;padding:54px 0 82px}.public-checkout-head{max-width:650px;margin-bottom:29px}.public-checkout-head h1{margin:0;color:#0f3b69;font-family:Georgia,serif;font-size:46px;font-weight:500;letter-spacing:-.045em}.public-checkout-head>p:not(.public-kicker){margin:11px 0 0;color:#6c859f;font-size:14px;line-height:1.7}.public-checkout-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:21px;align-items:start}.public-payment-card,.public-order-summary{border:1px solid #d8e7f6;border-radius:20px;background:#fff;box-shadow:0 11px 30px rgba(7,59,124,.06)}.public-payment-form{padding:30px}.public-payment-form fieldset{margin:0;padding:0;border:0}.public-payment-form legend{color:#153e6a;font-family:Georgia,serif;font-size:27px}.public-payment-form fieldset>p{margin:7px 0 18px;color:#7189a3;font-size:12px}.public-payment-options{display:grid;gap:9px}.public-payment-option{display:grid;grid-template-columns:0 35px minmax(0,1fr) 15px;gap:10px;align-items:center;min-height:57px;padding:0 13px;border:1px solid #d7e4f2;border-radius:13px;cursor:pointer;transition:border .16s ease,background .16s ease}.public-payment-option:has(input:checked){border-color:#3b94e6;background:#f0f8ff;box-shadow:0 6px 13px rgba(6,99,198,.08)}.public-payment-option input{opacity:0;width:0;margin:0}.public-payment-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e0f1ff;color:#0966c6;font-size:16px;font-weight:850}.public-payment-option strong,.public-payment-option small{display:block}.public-payment-option strong{color:#214a74;font-size:12px}.public-payment-option small{margin-top:3px;color:#7890a9;font-size:9px}.public-payment-option i{color:#75a0c8;font-size:20px;font-style:normal}.public-payment-form .public-btn{margin-top:21px}.public-payment-note{margin:12px 0 0;color:#7d94aa;font-size:10px;line-height:1.65;text-align:center}.public-gateway-not-ready{margin:25px;padding:21px;border:1px solid #f1ce8e;border-radius:14px;background:#fffaf0;color:#825f1b}.public-gateway-not-ready strong{font-size:15px}.public-gateway-not-ready p{margin:7px 0 0;font-size:12px;line-height:1.6}.public-order-summary{padding:16px}.public-order-summary>img{width:100%;height:150px;border-radius:13px;object-fit:cover}.public-order-summary>p{margin:16px 0 6px;color:#1470cc;font-size:9px;font-weight:850;letter-spacing:.14em}.public-order-summary h2{margin:0;color:#143d68;font-family:Georgia,serif;font-size:27px;font-weight:500}.public-order-summary dl,.public-status-order{display:grid;gap:10px;margin:20px 0 0}.public-order-summary dl>div,.public-status-order>div{display:flex;justify-content:space-between;gap:12px}.public-order-summary dt,.public-status-order dt{color:#7990a9;font-size:10px}.public-order-summary dd,.public-status-order dd{margin:0;overflow:hidden;color:#365876;font-size:10px;font-weight:700;text-align:right;text-overflow:ellipsis}.public-order-summary .public-order-total{margin-top:4px;padding-top:12px;border-top:1px solid #e2edf7}.public-order-summary .public-order-total dt,.public-order-summary .public-order-total dd{color:#0d4e93;font-size:14px;font-weight:850}.public-order-summary>small{display:block;margin-top:17px;color:#8298ad;font-size:9px}.public-status-shell{display:grid;place-items:center;min-height:calc(100vh - 230px);padding:60px 0}.public-status-card{width:min(100%,640px);box-sizing:border-box;padding:48px clamp(25px,6vw,68px);border:1px solid #d9e7f6;border-radius:25px;background:#fff;box-shadow:0 19px 45px rgba(5,57,123,.1);text-align:center}.public-status-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 19px;border-radius:19px;font-size:29px;font-weight:800}.is-success .public-status-icon{background:#daf6e7;color:#07874d}.is-waiting .public-status-icon{background:#e4f3ff;color:#0869c7}.is-expired .public-status-icon{background:#fff1db;color:#b36a00}.public-status-card h1{margin:0;color:#123b68;font-family:Georgia,serif;font-size:42px;font-weight:500;letter-spacing:-.04em}.public-status-card>p:not(.public-kicker){max-width:490px;margin:13px auto 0;color:#6c859f;font-size:13px;line-height:1.75}.public-status-card>.public-btn{margin-top:23px}.public-payment-number{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px;max-width:360px;margin:23px auto 0;padding:14px 15px;border:1px dashed #93c6f1;border-radius:14px;background:#f4faff;text-align:left}.public-payment-number small{color:#6d87a1;font-size:10px}.public-payment-number strong{color:#10539a;font-size:18px;letter-spacing:.05em}.public-payment-number button{grid-row:1/3;grid-column:2;padding:7px 9px;border:0;border-radius:8px;background:#d7ecff;color:#0b64c2;font-size:10px;font-weight:800;cursor:pointer}.public-status-order{margin-top:27px;padding-top:20px;border-top:1px solid #e4edf7;text-align:left}

.commerce-fieldset{margin:2px 0 3px;padding:16px;border:1px solid #cde1f5;border-radius:15px;background:#f8fbff}.commerce-fieldset legend{padding:0 5px;color:#0e5fb8;font-size:12px;font-weight:850}.commerce-fieldset>p{margin:0 0 13px;color:#647f9c;font-size:11px;line-height:1.6}.course-sale-admin-badge{display:inline-flex;margin:0 0 12px;padding:6px 8px;border-radius:8px;font-size:10px;font-weight:850}.course-sale-admin-badge.is-paid{background:#e5f1ff;color:#0754a9}.course-sale-admin-badge.is-free{background:#e5f8ed;color:#087646}.preview-access-toggle{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;padding:14px;border:1px solid #cfe2f6;border-radius:14px;background:#f5faff;cursor:pointer}.preview-access-toggle input{width:18px;height:18px;margin:2px 0 0;accent-color:#0870d2}.preview-access-toggle strong,.preview-access-toggle small{display:block}.preview-access-toggle strong{color:#184a78;font-size:12px}.preview-access-toggle small{margin-top:4px;color:#708aa5;font-size:10px;line-height:1.6}

@media(max-width:920px){.public-hero{grid-template-columns:1fr;gap:28px;padding-top:54px}.public-hero-copy{max-width:750px}.public-hero-visual{min-height:310px}.public-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-register-shell{grid-template-columns:1fr}.public-register-aside{padding:35px 40px}.public-checkout-grid{grid-template-columns:1fr}.public-order-summary{display:grid;grid-template-columns:160px 1fr;gap:0 17px}.public-order-summary>img{grid-row:1/5;height:100%;min-height:150px}.public-order-summary>p{margin-top:0}.public-order-summary dl{margin-top:14px}.public-order-summary>small{grid-column:2;margin-top:12px}.public-course-hero{grid-template-columns:1fr}.public-course-hero-image{min-height:270px}.public-steps{grid-template-columns:1fr}.public-detail-banner{padding:34px}.public-preview-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.public-header{height:67px;padding:0 15px}.public-main{padding:0 14px}.public-brand-mark{width:34px;height:34px;border-radius:11px;font-size:21px}.public-brand strong{font-size:18px}.public-nav{gap:12px}.public-nav>a:not(.public-nav-action){display:none}.public-nav .public-nav-action{padding:9px 11px;font-size:12px}.public-hero{min-height:0;padding:41px 3px 53px}.public-hero h1,.public-course-hero h1,.public-register-aside h1{font-size:43px}.public-hero-copy>p:not(.public-kicker){font-size:14px}.public-hero-visual{min-height:245px;border-radius:22px}.public-lesson-window{top:42px;left:25px;right:25px}.window-body{padding:19px}.public-float-card{right:12px;bottom:15px}.public-trust-row{gap:10px 13px;margin-top:24px;font-size:10px}.public-catalog-section,.public-faq{padding:48px 3px}.public-section-heading{align-items:flex-start;flex-direction:column;margin-bottom:20px}.public-section-heading h2,.public-steps h2{font-size:34px}.public-course-grid{grid-template-columns:1fr;gap:14px}.public-course-card{display:grid;grid-template-columns:117px minmax(0,1fr);border-radius:17px}.public-course-image{height:auto;min-height:100%}.public-course-image img{position:absolute;inset:0}.public-course-image .public-price-badge{top:8px;left:8px;right:auto;padding:5px 6px;font-size:9px}.public-course-body{padding:15px 13px}.public-course-body h3{margin:9px 0 5px;font-size:21px}.public-course-body>p{min-height:0;display:-webkit-box;overflow:hidden;font-size:11px;-webkit-box-orient:vertical;-webkit-line-clamp:2}.public-course-actions{margin-top:11px}.public-text-link{font-size:10px}.public-btn-mini{min-height:33px;padding:0 9px;font-size:10px}.public-steps{margin:0 3px;padding:34px 24px;border-radius:20px}.public-steps ol{grid-template-columns:1fr;gap:14px}.public-faq-grid{grid-template-columns:1fr}.public-faq details{padding:0 14px}.public-footer{padding:24px 17px}.public-footer span{max-width:210px}.public-course-hero{gap:25px;padding:28px 3px 38px}.public-course-hero-copy>p:not(.public-kicker){font-size:14px}.public-course-hero-image{min-height:220px;border-radius:19px}.public-curriculum-section{padding:42px 3px 56px}.public-module-card header{grid-template-columns:36px minmax(0,1fr);padding:14px}.public-module-card header>b{display:none}.public-module-card li{padding:13px 14px;grid-template-columns:26px minmax(0,1fr) auto}.public-module-card li strong{font-size:12px}.public-lock-label{font-size:9px}.public-detail-banner{align-items:flex-start;flex-direction:column;margin:0 3px 55px;padding:28px 23px;border-radius:19px}.public-detail-banner h2{font-size:31px}.public-preview-head{padding:20px 2px 14px}.public-preview-head div{display:none}.public-preview-lesson{border-radius:18px}.public-preview-lesson>header{padding:27px 20px 20px}.public-preview-lesson h1{font-size:36px}.public-preview-video{width:calc(100% - 28px);border-radius:11px}.public-preview-prose{padding:27px 20px 32px;font-size:14px}.public-preview-cta{margin-bottom:55px;padding:25px 20px}.public-preview-cta h2{font-size:29px}.public-register-shell{margin:0 -14px;padding:0;border:0;border-radius:0;box-shadow:none}.public-register-aside{padding:28px 25px}.public-register-aside h1{font-size:40px}.public-register-aside ul{display:none}.public-register-card{padding:34px 22px 49px}.public-form-heading h2{font-size:33px}.public-math-captcha{grid-template-columns:33px minmax(0,1fr) 59px 25px;gap:6px}.public-captcha-mark{width:33px;height:33px}.public-checkout-shell{padding:31px 2px 55px}.public-checkout-head h1{font-size:38px}.public-payment-form{padding:22px 15px}.public-payment-form legend{font-size:24px}.public-order-summary{grid-template-columns:100px minmax(0,1fr);padding:12px}.public-order-summary>img{min-height:130px}.public-order-summary h2{font-size:22px}.public-status-shell{min-height:auto;padding:40px 0 56px}.public-status-card{padding:36px 21px;border-radius:20px}.public-status-card h1{font-size:36px}.public-status-order dd{max-width:190px}.commerce-fieldset{padding:12px}.preview-access-toggle{padding:12px}}

.ipaymu-setup-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(270px,.88fr);gap:18px;align-items:start;margin-top:21px}.ipaymu-setup-grid .soft-steps{margin:0}.ipaymu-setup-grid code{padding:2px 5px;border-radius:5px;background:#edf5ff;color:#0756a9;font-size:.9em}.ipaymu-callback-box{display:grid;gap:11px;padding:20px;border:1px solid #c6dff7;border-radius:17px;background:linear-gradient(145deg,#f2f9ff,#fff)}.ipaymu-callback-box>span{color:#0a62ba;font-size:10px;font-weight:850;letter-spacing:.12em}.ipaymu-callback-box>code{display:block;overflow-wrap:anywhere;padding:12px;border-radius:10px;background:#e4f2ff;color:#104d8d;font-size:11px;line-height:1.55}.ipaymu-callback-box p{margin:0;color:#6c849d;font-size:11px;line-height:1.65}.ipaymu-callback-box .btn{justify-self:start}@media(max-width:800px){.ipaymu-setup-grid{grid-template-columns:1fr}.ipaymu-callback-box .btn{width:100%;justify-content:center}}

/* ========================================================================== */
/* DANA EDUKASI - DIRECT READABILITY FIX V11                                  */
/* HANYA WARNA TEKS. Tidak mengubah layout, login, database, route, atau data. */
/* ========================================================================== */

body.public-page,
body.auth-page,
body.student-page,
body.student-dashboard-page,
body.learning-page,
body.dashboard-page {
    --ink: #102f52 !important;
    --muted: #4a6783 !important;
    --dana-ink: #102f52 !important;
    --dana-muted: #4a6783 !important;
    --premium-muted: #4a6783 !important;
    --legal-text: #4a6783 !important;
    --legal-muted: #4a6783 !important;
}

/* PUBLIC / BERANDA */
body.public-page .public-brand small,
body.public-page .public-nav a:not(.public-nav-action),
body.public-page .public-nav-login {
    color: #173f69 !important;
}
body.public-page .public-nav a:not(.public-nav-action):hover { color: #155fa8 !important; }

body.public-page .home-v2-hero h1,
body.public-page .home-v2-hero h1 em {
    color: #0f2d50 !important;
    text-shadow: none !important;
}
body.public-page .home-v2-lead,
body.public-page .home-v2-hero-stats small,
body.public-page .home-v2-progress-card span,
body.public-page .home-v2-heading > div > p:not(.home-v2-eyebrow),
body.public-page .home-v2-course-body > p,
body.public-page .home-v2-course-meta span,
body.public-page .home-v2-flow-intro > p:not(.home-v2-eyebrow),
body.public-page .home-v2-flow-list p,
body.public-page .home-v2-faq details p,
body.public-page .public-hero-copy > p:not(.public-kicker),
body.public-page .public-course-hero-copy > p,
body.public-page .public-policy-hero > div > p,
body.public-page .public-course-body > p,
body.public-page .public-preview-lesson header > p:not(.public-kicker) {
    color: #4a6783 !important;
}
body.public-page .home-v2-hero-stats strong,
body.public-page .home-v2-progress-card strong,
body.public-page .home-v2-course-body h3 a,
body.public-page .home-v2-flow-list strong,
body.public-page .home-v2-faq summary {
    color: #14395f !important;
}
body.public-page .home-v2-eyebrow,
body.public-page .home-v2-inline-link,
body.public-page .home-v2-course-actions > a:first-child {
    color: #155fa8 !important;
}
body.public-page .home-v2-count,
body.public-page .home-v2-course-price,
body.public-page .home-v2-play {
    opacity: 1 !important;
}

/* FAQ / LEGAL / INFORMASI */
body.public-page .public-policy-grid p,
body.public-page .public-policy-note,
body.public-page .public-payment-flow small,
body.public-page .public-terms-check,
body.public-page .public-preview-resource-grid small,
body.public-page .legal-hero-copy > p,
body.public-page .legal-hero-note small,
body.public-page .legal-tabs a,
body.public-page .contact-item small,
body.public-page .legal-side-card > p:not(.legal-eyebrow),
body.public-page .side-contact span,
body.public-page .legal-mini-note {
    color: #4a6783 !important;
}
body.public-page .legal-card > p:not(.legal-eyebrow),
body.public-page .legal-card li,
body.public-page .legal-card section p,
body.public-page .faq-list p {
    color: #496b8a !important;
}
body.public-page .legal-hero-note strong,
body.public-page .legal-card h3,
body.public-page .faq-list summary,
body.public-page .contact-item strong {
    color: #14395f !important;
}

/* DETAIL KELAS / PREVIEW */
body.public-page .premium-course-hero .public-course-hero-copy > p:not(.public-kicker),
body.public-page .premium-course-highlights small,
body.public-page .premium-floating-note small,
body.public-page .premium-curriculum-heading p:not(.public-kicker),
body.public-page .premium-module-card header small,
body.public-page .premium-module-card li small,
body.public-page .premium-sidebar-stats small,
body.public-page .premium-sidebar-module li small,
body.public-page .premium-preview-head strong,
body.public-page .premium-preview-lesson header > p:not(.public-kicker),
body.public-page .premium-preview-cta p:not(.public-kicker),
body.public-page .premium-detail-cta > small {
    color: #4a6783 !important;
}
body.public-page .premium-chip-row > span:not(.public-price-badge),
body.public-page .premium-module-card header b,
body.public-page .premium-sidebar-module li strong,
body.public-page .premium-preview-prose {
    color: #355a7c !important;
}
body.public-page .premium-detail-banner h2,
body.public-page .premium-detail-banner p,
body.public-page .premium-unlock-card,
body.public-page .premium-unlock-card small {
    color: #ffffff !important;
}

/* LOGIN */
body.auth-page .auth-heading p:not(.eyebrow),
body.auth-page .auth-footnote,
body.auth-page .auth-register-link,
body.auth-page .field small,
body.auth-page .form-help,
body.auth-page .muted {
    color: #4a6783 !important;
}
body.auth-page .field > span,
body.auth-page .auth-heading h2 { color: #14395f !important; }
body.auth-page .auth-footnote a,
body.auth-page .auth-register-link a { color: #155fa8 !important; }
body.auth-page .auth-story .story-copy .eyebrow,
body.auth-page .auth-story .story-copy p:not(.eyebrow),
body.auth-page .auth-story .story-note strong,
body.auth-page .auth-story .story-note p,
body.auth-page .auth-story .brand,
body.auth-page .auth-story .brand strong { color: #ffffff !important; }

/* DASHBOARD PESERTA */
body.student-dashboard-page .student-header .brand small,
body.student-dashboard-page .student-greeting small,
body.student-dashboard-page .student-section-heading > div > p:not(.eyebrow),
body.student-dashboard-page .refined-course-card p,
body.student-dashboard-page .student-discover-card p,
body.student-dashboard-page .student-discover-meta span,
body.student-dashboard-page .student-footer {
    color: #4a6783 !important;
}
body.student-dashboard-page .student-header .brand strong,
body.student-dashboard-page .student-greeting strong,
body.student-dashboard-page .refined-course-card h3,
body.student-dashboard-page .student-discover-card h3,
body.student-dashboard-page .student-section-heading h2 { color: #14395f !important; }
body.student-dashboard-page .student-discover-actions > a:first-child,
body.student-dashboard-page .course-batch-label,
body.student-dashboard-page .course-count-badge { color: #155fa8 !important; }
body.student-dashboard-page .refined-welcome .eyebrow,
body.student-dashboard-page .refined-welcome h1,
body.student-dashboard-page .refined-welcome p:not(.eyebrow),
body.student-dashboard-page .welcome-points span { color: #ffffff !important; }

/* HALAMAN MATERI */
body.learning-page .learning-course-title,
body.learning-page .lesson-pagination small,
body.learning-page .completed-note p,
body.learning-page .lesson-section-title > p:last-child,
body.learning-page .student-assignment-card header small,
body.learning-page .student-upload-zone small,
body.learning-page .completion-hint,
body.learning-page .discussion-empty,
body.learning-page .comment-body header small,
body.learning-page .comment-reply small,
body.learning-page .material-tabs button:not(.is-active),
body.learning-page .material-panel-toolbar span,
body.learning-page .material-frame-note { color: #4a6783 !important; }
body.learning-page .lesson-content h1,
body.learning-page .lesson-section-title h2,
body.learning-page .student-assignment-card h3,
body.learning-page .material-hub-heading h2,
body.learning-page .material-panel-toolbar strong { color: #14395f !important; }
body.learning-page .lesson-prose,
body.learning-page .comment-body > p,
body.learning-page .discussion-body { color: #354968 !important; }
body.learning-page .material-panel-toolbar a,
body.learning-page .material-panel-toolbar button,
body.learning-page .header-home-link { color: #155fa8 !important; }
body.learning-page .curriculum-sidebar,
body.learning-page .curriculum-sidebar a,
body.learning-page .lesson-video,
body.learning-page .lesson-video p,
body.learning-page .material-embed-fallback { color: #ffffff !important; }

/* ADMIN */
body.dashboard-page .profile-chip small,
body.dashboard-page .stat-card span,
body.dashboard-page .stat-card small,
body.dashboard-page td small,
body.dashboard-page .muted,
body.dashboard-page .soft-note,
body.dashboard-page .dashboard-footer,
body.dashboard-page .section-description,
body.dashboard-page .course-metrics span,
body.dashboard-page .lesson-admin-row small,
body.dashboard-page .help-block p { color: #4a6783 !important; }
body.dashboard-page .topbar h1,
body.dashboard-page .stat-card strong,
body.dashboard-page .profile-chip > span,
body.dashboard-page .course-metrics b { color: #14395f !important; }