/* =====================================================================
   E-Learning JPM — Design System V2.0
   Identitas visual jpm.co.id: Burgundy, Red, Gold, Deep Navy, Light Gray.
   Semua warna, radius, bayangan, dan tipografi didefinisikan sebagai token.
   Komponen TIDAK boleh memakai nilai warna mentah.
   ===================================================================== */

:root {
  /* Warna merek */
  --jpm-burgundy:      #7A1220;
  --jpm-burgundy-700:  #5E0D19;
  --jpm-burgundy-300:  #A8455A;
  --jpm-red:           #C8102E;
  --jpm-red-600:       #A70D26;
  --jpm-gold:          #C9A227;
  --jpm-gold-200:      #F0E2AE;
  --jpm-navy:          #0B1F3B;
  --jpm-navy-700:      #14315A;

  /* Netral */
  --white:      #FFFFFF;
  --gray-25:    #FBFBFC;
  --gray-50:    #F5F6F8;
  --gray-100:   #ECEEF2;
  --gray-200:   #DDE1E8;
  --gray-300:   #C4CAD4;
  --gray-500:   #6B7280;
  --gray-600:   #4B5563;
  --gray-800:   #1F2937;

  /* Token semantik */
  --bg:            var(--gray-50);
  --surface:       var(--white);
  --surface-alt:   var(--gray-25);
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --text:          var(--jpm-navy);
  --text-muted:    var(--gray-500);
  --text-invert:   var(--white);
  --primary:       var(--jpm-burgundy);
  --primary-hover: var(--jpm-burgundy-700);
  --accent:        var(--jpm-red);
  --gold:          var(--jpm-gold);
  --navy:          var(--jpm-navy);

  --success:   #12784F;
  --success-bg:#E6F4EE;
  --warning:   #A66300;
  --warning-bg:#FDF3E2;
  --danger:    #B3261E;
  --danger-bg: #FCEBEA;
  --info:      #14315A;
  --info-bg:   #E8EEF7;

  /* Gradien merek */
  --grad-primary: linear-gradient(135deg, var(--jpm-burgundy) 0%, var(--jpm-red) 100%);
  --grad-navy:    linear-gradient(135deg, var(--jpm-navy) 0%, var(--jpm-navy-700) 100%);
  --grad-gold:    linear-gradient(135deg, #B8901D 0%, var(--jpm-gold) 60%, #E3C862 100%);

  /* Radius & bayangan */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-full: 999px;
  --sh-1: 0 1px 2px rgba(11,31,59,.06), 0 1px 3px rgba(11,31,59,.08);
  --sh-2: 0 4px 12px rgba(11,31,59,.08);
  --sh-3: 0 12px 32px rgba(11,31,59,.12);
  --sh-brand: 0 10px 28px rgba(122,18,32,.22);

  /* Tipografi */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-md: .9375rem; --fs-lg: 1.0625rem;
  --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.9rem;

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 62px;
  --gap: 1rem;
  --speed: .18s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

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

body.jpm2 {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.jpm2 h1, .jpm2 h2, .jpm2 h3, .jpm2 h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 .4rem;
  letter-spacing: -.01em;
}
.jpm2 h1 { font-size: var(--fs-3xl); font-weight: 800; }
.jpm2 h2 { font-size: var(--fs-2xl); font-weight: 700; }
.jpm2 h3 { font-size: var(--fs-xl); font-weight: 700; }
.jpm2 a  { color: var(--primary); text-decoration: none; }
.jpm2 a:hover { text-decoration: underline; }
.jpm2 p  { margin: 0 0 .75rem; }

.jpm2 :focus-visible {
  outline: 3px solid var(--jpm-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--primary); color: var(--text-invert); padding: .6rem 1rem; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.tnum  { font-variant-numeric: tabular-nums; }
.grow  { flex: 1 1 auto; }
.row   { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* ------------------------------ Shell ------------------------------ */
.app-shell { display: flex; min-height: 100vh; }

.app-side {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--grad-navy); color: #DCE3EE;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-side__brand {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.10);
}
.app-side__brand b { color: #fff; font-family: var(--font-head); font-size: 1rem; letter-spacing: .01em; }
.app-side__brand span { display: block; font-size: var(--fs-xs); color: #9FB0C9; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--grad-primary);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .85rem;
  box-shadow: var(--sh-brand); flex: none;
}
.app-side__group { padding: .85rem 1rem .2rem; font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .09em; color: #7F92AE; }
.app-side nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem 1.1rem; color: #C9D4E4; font-size: var(--fs-md); text-decoration: none;
  border-left: 3px solid transparent; transition: background var(--speed), color var(--speed);
}
.app-side nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.app-side nav a.is-active {
  background: rgba(200,16,46,.16); color: #fff; border-left-color: var(--jpm-red); font-weight: 600;
}
.app-side nav a .ic { width: 18px; text-align: center; flex: none; }
.app-side nav a .pill { margin-left: auto; }
.app-side__foot { margin-top: auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.10); font-size: var(--fs-xs); color: #8496B0; }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-top {
  height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem; padding: 0 1.15rem;
  position: sticky; top: 0; z-index: 30;
}
.app-top__title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); }
.app-content { padding: 1.25rem 1.15rem 3rem; max-width: 1360px; width: 100%; }

.burger { display: none; background: none; border: 1px solid var(--border); border-radius: var(--r-md);
  width: 38px; height: 38px; font-size: 1.1rem; cursor: pointer; color: var(--text); }

.page-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head p { margin: .15rem 0 0; color: var(--text-muted); }

/* Breadcrumb */
.crumb { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: .5rem; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumb li + li::before { content: "/"; margin-right: .35rem; color: var(--border-strong); }

/* ------------------------------ Kartu ------------------------------ */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 1.1rem;
}
.card--pad0 { padding: 0; }
.card__head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); }
.card__head h3 { margin: 0; font-size: var(--fs-lg); }
.card__body { padding: 1.1rem; }
.card--hover { transition: transform var(--speed), box-shadow var(--speed); }
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Statistik */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: .95rem 1.05rem; box-shadow: var(--sh-1); display: flex; gap: .8rem; align-items: center; }
.stat__ic { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center;
  font-size: 1.15rem; background: var(--gray-100); flex: none; }
.stat__ic--primary { background: rgba(122,18,32,.10); }
.stat__ic--gold    { background: rgba(201,162,39,.16); }
.stat__ic--navy    { background: rgba(11,31,59,.09); }
.stat__ic--red     { background: rgba(200,16,46,.10); }
.stat__val { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__lbl { font-size: var(--fs-sm); color: var(--text-muted); }

/* ------------------------------ Tombol ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: var(--r-md); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: var(--fs-md); cursor: pointer;
  text-decoration: none; transition: background var(--speed), box-shadow var(--speed), transform var(--speed);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--grad-primary); color: var(--text-invert); box-shadow: var(--sh-brand); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--navy { background: var(--navy); color: var(--text-invert); }
.btn--gold { background: var(--grad-gold); color: #3A2C05; }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--gray-50); }
.btn--danger { background: var(--danger); color: var(--text-invert); }
.btn--sm { padding: .35rem .7rem; font-size: var(--fs-sm); }
.btn--lg { padding: .75rem 1.4rem; font-size: var(--fs-lg); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ------------------------------ Formulir ------------------------------ */
.field { display: block; margin-bottom: .85rem; font-size: var(--fs-sm); font-weight: 600; color: var(--gray-600); }
.field > input, .field > select, .field > textarea,
.input, select.input, textarea.input {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 400;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.field > input:focus, .field > select:focus, .field > textarea:focus, .input:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(122,18,32,.12); outline: none;
}
.field .hint { display: block; margin-top: .25rem; font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); }
.field .err  { display: block; margin-top: .25rem; font-weight: 500; color: var(--danger); font-size: var(--fs-xs); }

.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar .search { position: relative; flex: 1 1 260px; min-width: 200px; }
.toolbar .search input { width: 100%; padding-left: 2.1rem; }
.toolbar .search::before { content: "🔎"; position: absolute; left: .65rem; top: 50%; transform: translateY(-45%); font-size: .85rem; }

/* ------------------------------ Tabel ------------------------------ */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.tbl th, table.tbl td { padding: .65rem .85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl thead th {
  background: var(--gray-50); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-600); font-weight: 700; white-space: nowrap;
}
table.tbl tbody tr:hover { background: var(--surface-alt); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------ Badge & pill ------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem;
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5;
  background: var(--gray-100); color: var(--gray-600); white-space: nowrap;
}
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--gold    { background: rgba(201,162,39,.18); color: #7A6110; }
.badge--primary { background: rgba(122,18,32,.10); color: var(--primary); }
.pill { background: var(--jpm-red); color: #fff; border-radius: var(--r-full); font-size: .68rem;
  font-weight: 700; padding: .05rem .4rem; min-width: 18px; text-align: center; }

/* ------------------------------ Progress ------------------------------ */
.progress { background: var(--gray-100); border-radius: var(--r-full); height: 8px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--grad-primary); border-radius: var(--r-full); transition: width .5s ease; }
.progress--gold .progress__bar { background: var(--grad-gold); }
.progress--lg { height: 12px; }
.progress-line { display: flex; align-items: center; gap: .6rem; }
.progress-line .progress { flex: 1; }
.progress-line b { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); min-width: 3ch; text-align: right; }

/* Cincin progres */
.ring { --p: 0; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--jpm-red) calc(var(--p) * 1%), var(--gray-100) 0); }
.ring span { width: 58px; height: 58px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font-weight: 800; font-size: .85rem; font-family: var(--font-head); }

/* ------------------------------ Status ------------------------------ */
.alert { border-radius: var(--r-md); padding: .7rem .9rem; margin-bottom: 1rem; font-size: var(--fs-md);
  border: 1px solid transparent; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(18,120,79,.2); }
.alert-error, .alert-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(179,38,30,.2); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(166,99,0,.2); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: rgba(20,49,90,.15); }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty__ic { font-size: 2rem; margin-bottom: .4rem; }
.empty h3 { color: var(--text); }

.skeleton { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 200% 100%; animation: sk 1.4s infinite; border-radius: var(--r-md); height: 1rem; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Toast */
.toast-wrap { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: var(--navy); color: #fff; padding: .65rem .9rem; border-radius: var(--r-md);
  box-shadow: var(--sh-3); font-size: var(--fs-sm); display: flex; gap: .5rem; align-items: center;
  animation: toastIn .25s ease; max-width: 22rem; }
.toast--success { background: var(--success); }
.toast--error { background: var(--danger); }
.toast--gold { background: var(--grad-gold); color: #3A2C05; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Modal */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem;
  background: rgba(11,31,59,.55); }
.modal__box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  width: min(560px, 100%); max-height: 88vh; overflow: auto; }
.modal__head { padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
.modal__body { padding: 1.1rem; }
.modal__foot { padding: .9rem 1.1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; }

/* ------------------------------ Gamifikasi ------------------------------ */
.xp-chip { display: inline-flex; align-items: center; gap: .35rem; background: rgba(201,162,39,.16);
  color: #7A6110; border-radius: var(--r-full); padding: .2rem .6rem; font-weight: 700; font-size: var(--fs-sm); }
.level-card { background: var(--grad-navy); color: #fff; border-radius: var(--r-lg); padding: 1.1rem; box-shadow: var(--sh-2); }
.level-card h3 { color: #fff; }
.level-card .progress { background: rgba(255,255,255,.18); }
.level-card .progress__bar { background: var(--grad-gold); }
.level-card .muted { color: #AFBED4; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: end; margin-bottom: 1.1rem; }
.podium__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: .9rem .6rem; text-align: center; box-shadow: var(--sh-1); }
.podium__item .ava { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto .45rem;
  background: var(--gray-100); display: grid; place-items: center; font-weight: 800; color: var(--primary);
  overflow: hidden; }
.podium__item .ava img { width: 100%; height: 100%; object-fit: cover; }
.podium__item.p1 { border-color: var(--gold); box-shadow: 0 8px 22px rgba(201,162,39,.28); transform: translateY(-8px); }
.podium__item.p1 .medal { color: var(--gold); }
.podium__item .medal { font-size: 1.4rem; }
.podium__item .nm { font-weight: 700; font-size: var(--fs-sm); }

.move { font-size: var(--fs-xs); font-weight: 700; }
.move--naik  { color: var(--success); }
.move--turun { color: var(--danger); }
.move--tetap { color: var(--text-muted); }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.badge-card { text-align: center; padding: 1rem .6rem; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-1); }
.badge-card .ic { font-size: 2rem; line-height: 1; }
.badge-card.locked { opacity: .5; filter: grayscale(1); }
.badge-card .nm { font-weight: 700; font-size: var(--fs-sm); margin-top: .4rem; }
.badge-card .ds { font-size: var(--fs-xs); color: var(--text-muted); }

.streak-flame { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; color: var(--jpm-red); }

/* Kartu kelas */
.course-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.course-card__img { aspect-ratio: 16/9; background: var(--grad-navy); position: relative; overflow: hidden; }
.course-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-card__body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.course-card__body h3 { font-size: var(--fs-lg); }
.course-card__meta { display: flex; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); }
.course-card .btn { margin-top: auto; }

/* Bagan sederhana */
.bar-chart { display: flex; align-items: flex-end; gap: .5rem; height: 170px; padding-top: .5rem; }
.bar-chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .35rem; height: 100%; }
.bar-chart__bar { width: 100%; max-width: 46px; background: var(--grad-primary); border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 3px; }
.bar-chart__lbl { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

.lang-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-full); overflow: hidden; }
.lang-switch__btn { padding: .2rem .6rem; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); background: var(--surface); }
.lang-switch__btn:hover { text-decoration: none; background: var(--gray-50); }
.lang-switch__btn.is-active { background: var(--primary); color: #fff; }

.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gray-100); color: var(--primary);
  display: grid; place-items: center; font-weight: 800; font-size: .8rem; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.notif-item { display: flex; gap: .7rem; padding: .75rem .9rem; border-bottom: 1px solid var(--border); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(200,16,46,.04); }
.notif-item .ic { font-size: 1.1rem; }

.pagination { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: 1rem; }
.pagination a, .pagination span { padding: .3rem .65rem; border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-sm); background: var(--surface); }
.pagination .active, .pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a { padding: .5rem .85rem; font-size: var(--fs-md); font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs a.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* ------------------------------ Responsif ------------------------------ */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app-side {
    position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-100%);
    transition: transform var(--speed); box-shadow: var(--sh-3);
  }
  .app-shell.nav-open .app-side { transform: none; }
  .app-shell.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(11,31,59,.45); z-index: 50; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --fs-3xl: 1.55rem; --fs-2xl: 1.3rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .app-content { padding: 1rem .85rem 2.5rem; }
  .podium { grid-template-columns: 1fr; }
  .podium__item.p1 { transform: none; }
  table.tbl th, table.tbl td { padding: .55rem .6rem; font-size: var(--fs-sm); }
}

@media print {
  .app-side, .app-top, .toolbar, .btn { display: none !important; }
  .app-content { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ================= V2.0 — Komponen halaman baru ================= */
.stat-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-bottom:1.25rem}
.card-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.filterbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1.1rem}
.filterbar input,.filterbar select{padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font:inherit;min-width:200px}
.hint-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:flex-start;margin-bottom:.6rem}
.form label{display:block;margin:.7rem 0;font-weight:600;font-size:.92rem}
.form textarea,.form input[type=file]{width:100%;padding:.65rem .8rem;border:1px solid var(--border);border-radius:var(--r-md);font:inherit;background:var(--surface)}
.form .actions{margin-top:.9rem;display:flex;gap:.6rem}
.prose{line-height:1.65}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* Jalur belajar */
.path-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.path-item{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.9rem 1rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.path-item.is-now{border-color:var(--brand,#7A1220);box-shadow:0 0 0 3px rgba(122,18,32,.08)}
.path-item.is-locked{opacity:.62}
.path-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  background:rgba(122,18,32,.08);color:var(--brand,#7A1220)}
.path-item.is-done .path-num{background:rgba(22,140,90,.12);color:#12805a}

/* Notifikasi */
.notif-list{list-style:none;margin:0;padding:0}
.notif-item{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid var(--border)}
.notif-item:last-child{border-bottom:0}
.notif-item.is-new{background:rgba(201,162,39,.07);border-radius:var(--r-md);padding-inline:.7rem}
.notif-ico{font-size:1.2rem}
.notif-act{display:flex;gap:.4rem;align-items:center}

/* Pencarian */
.search-list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.search-list li{padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.search-list li:last-child{border-bottom:0}
.v6-top-search{flex:1;max-width:360px;margin-inline:1rem}
.v6-top-search input{width:100%;padding:.55rem .85rem;border:1px solid var(--border);border-radius:999px;font:inherit;background:var(--surface)}
.v6-bell{position:relative;text-decoration:none;font-size:1.15rem;margin-right:.5rem}
.v6-bell-dot{position:absolute;top:-6px;right:-9px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--danger,#C8102E);color:#fff;font-size:.68rem;line-height:18px;text-align:center;font-weight:700}

/* Papan peringkat */
.lb tr.is-me{background:rgba(201,162,39,.12);font-weight:600}
@media (max-width:820px){
  .v6-top-search{display:none}
  .path-item{grid-template-columns:auto 1fr;grid-template-areas:"n b" ". a"}
  .path-num{grid-area:n}.path-body{grid-area:b}.path-act{grid-area:a;justify-self:start}
}