/* SIMAKARA LMS — Color System */
:root {
  --orange: #FF8702;
  --purple: #6725A1;
  --red: #DC2A38;
  --green: #07734F;
  --pink: #F26D7E;
  --fog: #F0F4F3;
  --ink: #272727;
  --white: #FFFFFF;
  --black: #000000;
  --bg: #0f1014;
  --card: #15161d;
  --muted: #b8bcc7;
  --line: rgba(255, 255, 255, .08);

  --grad-1: linear-gradient(135deg, var(--orange), var(--purple));
  --grad-2: linear-gradient(135deg, var(--green), var(--pink));
  --grad-3: linear-gradient(135deg, #1f4150, var(--purple));
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--fog);
  background: var(--bg);
  overflow-x: hidden;
}

.bg-gradients {
  position: fixed;
  inset: 0;
  pointer-events: none;
  filter: blur(60px) saturate(120%);
  opacity: .7;
  display: none;
}

.app {
  --sb: 280px;
  display: grid;
  grid-template-columns: var(--sb) 1fr;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}

.app.is-collapsed {
  --sb: 0px
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  background: linear-gradient(180deg, #12131a, #0c0d12);
  border-right: 1px solid var(--line);
  transition: transform .25s ease;
  width: var(--sb);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  justify-content: space-between
}

.brand-text span {
  font-weight: 800;
  letter-spacing: .4px
}

.brand-text small {
  display: block;
  opacity: .65
}

.circle-btn {
  all: unset;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--line)
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: -2px 0 14px;
  position: relative;
  z-index: 20
}

.icon-btn {
  all: unset;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  color: #fff
}

.icon-btn:hover {
  border-color: rgba(255, 255, 255, .18)
}

.icon-btn.ghost {
  background: transparent
}

.side-toggle {
  margin: 12px 0 6px auto;
  display: block
}

.app.is-collapsed .sidebar {
  transform: none;
  width: 0;
  padding: 0;
  border-right: 0;
  pointer-events: none
}

.app.is-collapsed #openSidebar {
  opacity: 1;
  pointer-events: auto
}

#openSidebar {
  opacity: .9;
  pointer-events: auto;
  position: relative;
  z-index: 60
}

.sidebar-scrim {
  display: none
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0
}

.menu-item {
  all: unset;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 14px;
  color: #E7E9EF;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-item .ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--icon, #E7E9EF);
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke
}

.menu-item:hover {
  border-color: rgba(255, 255, 255, .16)
}

.menu-item.active {
  background: var(--grad-1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(255, 135, 2, .25)
}

.menu-item.active .ic svg {
  stroke: #fff
}

.menu-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-parent .caret {
  margin-left: auto;
  display: grid;
  place-items: center;
  opacity: .9;
}

.menu-parent .caret svg {
  width: 18px;
  height: 18px;
  stroke: #E7E9EF;
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
  transition: transform .18s ease, opacity .18s ease;
}

.menu-group.open .menu-parent .caret svg {
  transform: rotate(90deg);
}

.menu-children {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.menu-group.open .menu-children {
  display: flex;
}

.menu-item.menu-child {
  padding: 10px 12px;
  border-radius: 12px;
}

.menu-item.menu-child .ic svg {
  width: 18px;
  height: 18px;
}

.profile-mini {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01))
}

.avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--grad-2);
  font-weight: 700
}

.avatar.img {
  background: none;
  overflow: hidden
}

.avatar.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit
}

.who .name {
  font-weight: 700
}

.who .sub {
  color: var(--muted);
  font-size: .85rem
}

.content {
  padding: 28px;
  max-width: 100%;
  overflow-x: hidden;
}

.content>.card,
.content>.grid {
  margin-bottom: 16px
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: fade .35s ease
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.page-header h1 {
  margin: 0;
  font-size: 1.6rem
}

/* Add breathing room below titles for data-heavy pages */
#materials .page-header,
#bbm .page-header,
#tugas .page-header {
  margin-bottom: 12px
}

.subtitle {
  margin: .35rem 0 0;
  color: var(--muted)
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0
}

.kpis.three {
  grid-template-columns: repeat(3, 1fr)
}

.grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch
}

.grid.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.card {
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px
}

.card-head .lh {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0
}

.card-head .lh h3 {
  margin: 0;
  min-width: 0
}

.card-head .lh svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #cfd3de
}

.card h3 {
  margin: 0 0 10px 0
}

.kpi {
  display: flex;
  align-items: center;
  gap: 14px
}

.kpi .stat {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
  border-left: 4px solid var(--accent);
  padding-left: 10px
}

.kpi .stat.big {
  font-size: 2rem
}

.kpi-label {
  color: var(--muted)
}

.kpi .mini-btn {
  margin-top: 10px
}

/* Streak highlight */
.streak {
  position: relative;
  overflow: hidden;
  background: radial-gradient(60% 120% at -10% 50%, rgba(255, 135, 2, .35), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px var(--line);
}

.streak:after {
  content: "";
  position: absolute;
  inset: -60% -40% auto auto;
  height: 140%;
  width: 140%;
  background: conic-gradient(from 0deg, rgba(255, 135, 2, .2), rgba(242, 109, 126, .15), rgba(103, 37, 161, .2), rgba(255, 135, 2, .2));
  filter: blur(30px);
  animation: spin 8s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}

.ring .track {
  fill: none;
  stroke: #2a2c35;
  stroke-width: 12
}

.ring .progress {
  fill: none;
  stroke: #FF8702;
  stroke-width: 12;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  filter: drop-shadow(0 8px 22px rgba(255, 135, 2, .35))
}

.ring-value {
  position: absolute;
  font-weight: 800
}

.simple-list {
  margin: 0;
  padding-left: 18px;
  color: #eaeef7
}

.simple-list li {
  margin: .35rem 0
}

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0
}

.qa {
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 999px;
  color: #111;
  background: var(--fog);
  border: 1px solid #e9ecef
}

.qa:hover {
  background: #fff
}

.formview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px
}

.formview label {
  display: block;
  font-size: .8rem;
  color: var(--muted)
}

.formview>div {
  padding: 10px;
  border-radius: 12px;
  background: #12131a;
  border: 1px solid var(--line)
}

.calendar iframe {
  width: 100%;
  height: 70vh;
  border-radius: 12px
}

.actions {
  margin: 8px 0 12px
}

.filterbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap
}

.select,
.search {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f1118;
  color: #fff
}

.select.right {
  margin-left: auto
}

.search {
  min-width: 260px
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8ecf5
}

.table {
  overflow: hidden;
  padding: 0
}

.table .thead,
.table .tbody>div {
  display: grid;
  grid-template-columns: 1.2fr 3fr repeat(3, 1fr) 1.4fr;
  gap: 12px;
  align-items: center
}

.table .thead {
  font-weight: 800;
  padding: 14px 16px
}

.grad-bar {
  background: linear-gradient(90deg, var(--orange), var(--pink));
  color: #fff
}

.table .tbody {
  display: flex;
  flex-direction: column
}

.table .row {
  padding: 12px 16px;
  border-top: 1px solid var(--line)
}

.table .row:hover {
  background: rgba(255, 255, 255, .02)
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px
}

.page-num {
  opacity: .8
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #151827;
  border: 1px solid var(--line);
  font-size: .75rem
}

.play {
  color: var(--pink)
}

.doc {
  color: #bda6ff
}

.progress-check {
  display: flex;
  gap: 12px;
  align-items: center
}

/* Materials & Rekaman Kelas – revamped actions */
#materials .filterbar,
#bbm .filterbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background:
    radial-gradient(600px 300px at -10% 0%, rgba(255, 135, 2, .12), transparent 60%),
    radial-gradient(600px 300px at 120% 0%, rgba(103, 37, 161, .18), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

.ic-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: #eaeef7
}

.ic-btn:hover {
  border-color: rgba(255, 255, 255, .18)
}

.col-actions {
  display: flex;
  gap: 8px;
  align-items: center
}

.col-actions .pdf {
  color: #bda6ff
}

.col-actions .play {
  color: var(--pink)
}

.col-actions .quiz {
  color: var(--orange)
}

.col-actions .disc,
.col-actions .mod {
  color: #bda6ff
}

/* Card list for Materials */
.materials-cards {
  display: grid;
  gap: 10px
}

.mat-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(1200px 600px at 110% 10%, rgba(103, 37, 161, .18), transparent 60%),
    radial-gradient(900px 500px at -10% 60%, rgba(255, 135, 2, .12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

.mat-card:hover {
  border-color: rgba(255, 255, 255, .14)
}

.mc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px
}

.mc-meta {
  color: #aeb4c3;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: 8px
}

.mc-meta .ico {
  opacity: .85
}

.mc-sub {
  color: #aeb4c3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px
}

.mc-sub .ico {
  opacity: .85
}

.mc-title {
  margin: .25rem 0 .5rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .2px
}

.mc-title.sm {
  font-size: 1.05rem
}

.mc-right {
  display: flex;
  gap: 8px;
  align-items: center
}

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  font-weight: 700
}

.chip.tone {
  background: linear-gradient(90deg, var(--orange), var(--pink));
  color: #111;
  border-color: transparent
}

.badge-new {
  margin-left: 6px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(90deg, rgba(242, 109, 126, .3), rgba(255, 135, 2, .3));
  font-size: .7rem
}

.status {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 700
}

.status.sm {
  padding: 4px 8px;
  font-size: .8rem
}

.status.done {
  background: rgba(7, 115, 79, .18);
  color: #a8f3d2;
  border-color: rgba(7, 115, 79, .35)
}

.status.todo {
  background: rgba(103, 37, 161, .18);
  color: #d6c4ff;
  border-color: rgba(103, 37, 161, .35)
}

.mc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: .4rem 0 .8rem
}

.pill {
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: #eaeef7;
  font-weight: 800;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  line-height: 1
}

.pill.sm {
  padding: 8px 14px;
  font-size: .9rem
}

.pill.ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .14)
}

.pill.ghost:hover {
  background: rgba(255, 255, 255, .04)
}

.pill.grad {
  background: linear-gradient(90deg, rgba(255, 135, 2, .85), rgba(242, 109, 126, .85));
  color: #111;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(242, 109, 126, .25)
}

.pill.grad:hover {
  filter: brightness(.98)
}

.pill .tx {
  text-decoration: underline;
  text-underline-offset: 2px
}

.pill .chev {
  margin-left: 6px;
  opacity: .7
}

.mc-check {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #eaeef7;
  font-size: .95rem
}

.section-sub {
  margin: 18px 0 10px;
  font-weight: 800
}

.section-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px
}

.section-sub-row .section-sub {
  margin: 0
}

.sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: var(--muted)
}

.sort-label {
  white-space: nowrap
}

.select.small {
  padding: 8px 12px;
  font-size: .9rem;
  min-width: 140px
}

/* compact icon row */
.mc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px
}

.mc-icons {
  display: flex;
  gap: 10px;
  margin-top: 6px
}

.mc-icons .ic-only {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: #eaeef7
}

.mc-icons .ic-only.play {
  background: linear-gradient(135deg, #ff0000, #b00404);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(239, 68, 68, .4)
}

/* Materi PDF button – blue book style */
#materials .mc-icons a[title="Materi PDF"] {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(59, 130, 246, .4);
}

.mc-icons .ic-only:hover {
  border-color: rgba(255, 255, 255, .18)
}

  .mc-check {
    color: #eaeef7;
    font-size: .9rem
  }

  /* Materi & Rekaman: gunakan gaya tugas-card */
  #materials .materials-cards .mat-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
  }

  #materials .materials-cards .mat-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background: var(--orange);
    opacity: .85;
  }

  #materials .mc-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 4px;
  }

  #materials .mc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
  }

  #materials .mc-title.sm {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
  }

  #materials .mc-sub {
    margin-top: 2px;
    font-size: .8rem;
    color: var(--muted);
  }

  #materials .mc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: .8rem;
  }

  #materials .mc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }

  /* =====================
     Tugas Kelas section
     ===================== */
  .tugas-wrapper {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .tugas-hero {
    display: flex;
    align-items: center;
    padding: 18px;
    border-radius: 18px;
    background:
      radial-gradient(1200px 600px at -10% -10%, rgba(255, 135, 2, .18), transparent 60%),
      radial-gradient(1000px 500px at 110% 10%, rgba(103, 37, 161, .25), transparent 60%),
      linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid var(--line);
  }

  .tugas-breadcrumb {
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 4px;
  }

  .tugas-title {
    margin: 0;
    font-size: 1.4rem;
  }

  .tugas-subtitle {
    margin-top: 6px;
  }

  .tugas-filterbar {
    margin-top: 4px;
  }

  .tugas-cards {
    display: grid;
    gap: 10px;
  }

  .tugas-card {
    position: relative;
    overflow: hidden;
  }

  .tugas-card-accent {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
    background: var(--orange);
    opacity: .85;
  }

  .tugas-card-accent.done {
    background: #16a34a;
  }

  .tugas-card-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .tugas-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
  }

  .tugas-meta-chip {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    font-size: .65rem;
    font-weight: 700;
  }

  .tugas-meta-new {
    padding: 2px 6px;
    border-radius: 999px;
    background: #f97316;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
  }

  .tugas-title-text {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
  }

  .tugas-subline {
    margin-top: 2px;
    font-size: .8rem;
    color: var(--muted);
  }

  .tugas-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .tugas-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: .8rem;
  }

  .tugas-status-label {
    font-size: .7rem;
    font-weight: 700;
  }

  .tugas-status-label.done {
    color: #4ade80;
  }

  .tugas-status-label.todo {
    color: #fb923c;
  }

  .tugas-check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--muted);
  }

  .tugas-check-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
  }

  .tugas-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .tugas-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    color: #eaeef7;
    text-decoration: none;
  }

  .tugas-btn.primary {
    background: linear-gradient(135deg, #fb923c, #ea580c);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(251, 146, 60, .35);
  }

  .tugas-btn.secondary-green {
    background: linear-gradient(135deg, #22c55e, #15803d);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .35);
  }

  .tugas-btn.secondary-gray {
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  }

  .tugas-btn.materials-video-btn {
    background: linear-gradient(135deg, #ff0000, #b00404);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(239, 68, 68, .4);
  }

  .tugas-btn.materials-pdf-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, .4);
  }

  .tugas-btn[aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
  }

  .tugas-empty {
    padding: 18px;
    border-radius: 14px;
    border: 1px dashed var(--line);
    text-align: center;
    color: var(--muted);
    background: rgba(15,17,24,.6);
  }

body.modal-open,
html.modal-open {
  overflow: hidden
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  z-index: 40
}

.modal.show {
  display: grid
}

.modal-card {
  width: min(880px, 92vw);
  border-radius: 18px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0f1118;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45)
}

.modal-head {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--grad-1);
  color: #fff
}

.modal-body {
  padding: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.modal-foot {
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--line)
}

@media (max-width: 768px) {
  .modal {
    align-items: flex-start;
    padding: 16px 12px;
    overflow-y: auto;
  }
  .modal-card {
    width: 100%;
    max-height: none;
    margin-top: 24px;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.form-grid input,
.form-grid textarea,
.form-grid select {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f1118;
  color: #fff
}

.file-row {
  display: flex;
  gap: 8px;
  align-items: center
}

.muted {
  color: var(--muted)
}

.form-status {
  font-size: .9rem;
  color: var(--muted);
  margin-right: auto;
  min-height: 1.2rem
}

.profile-form .avatar-field {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.profile-form .avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background: var(--grad-2);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  overflow: hidden
}

.profile-form .avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.profile-form .avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .95rem;
  min-width: 220px
}

.profile-form .avatar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.profile-form .file-btn {
  cursor: pointer
}

.profile-form .file-btn input {
  display: none
}

.profile-form .link {
  background: none;
  border: none;
  padding: 0;
  color: var(--orange);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline
}

.profile-form .form-grid input,
.profile-form .form-grid textarea,
.profile-form .form-grid select {
  background: #0f1118;
  color: #fff;
  border: 1px solid var(--line)
}

.profile-form .form-grid textarea {
  resize: vertical;
  min-height: 90px
}

.span-2 {
  grid-column: span 2
}

.pill.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid var(--line)
}

/* === Materials & Rekaman — JSX design parity === */
.pill.white {
  background: #fff;
  color: #0f1114;
  border: 1px solid rgba(0, 0, 0, .06)
}

.pill.white:hover {
  filter: brightness(.98)
}

.mat-stats.xl .stat-tile,
.mat-stats.xl .progress-card {
  padding: 16px
}

.materials-table .thead.rounded {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px
}

/* Dashboard Chart */
.chart {
  position: relative
}

.chart .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--orange);
  color: #111;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700
}

.chart svg#weeklyChart {
  width: 100%;
  height: 220px;
  display: block
}

.chart .axis {
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 1
}

.chart .line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3
}

.chart .dot {
  fill: #fff;
  stroke: var(--orange);
  stroke-width: 3
}

/* Agenda cards */
.agenda-list {
  display: grid;
  gap: 10px
}

.agenda {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: #12131a;
  border: 1px solid var(--line);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none
}

.agenda:hover {
  border-color: rgba(255, 255, 255, .16)
}

.agenda:focus-visible {
  outline: 2px solid rgba(242, 109, 126, .55);
  outline-offset: 2px
}

/* Live Class modal */
.live-class {
  display: grid;
  gap: 10px
}

.live-topic {
  font-weight: 900;
  font-size: 1.05rem;
  color: #eaeef7
}

.live-time {
  font-weight: 700
}

.live-tutor {
  margin-top: -2px;
  font-style: italic
}

.live-sep {
  height: 1px;
  background: var(--line);
  margin: 6px 0
}

.live-kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: start
}

.live-kv .k {
  color: var(--muted);
  font-weight: 700
}

.live-kv .v {
  color: #eaeef7;
  font-weight: 700;
  word-break: break-all
}

.live-kv .v a,
.live-kv .v a:visited {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px
}

.live-kv .v a:hover {
  color: #ffffff;
  filter: brightness(1.05)
}

.live-warning {
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(220, 42, 56, .35);
  background: radial-gradient(120% 120% at 0% 0%, rgba(220, 42, 56, .18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  color: #f2d7d9;
  line-height: 1.45
}

.live-warning strong {
  color: #fff
}

.pill.grad-blue {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff;
  border: 0;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .25)
}

.pill.grad-blue:hover {
  filter: brightness(1.05)
}

.pill.grad-blue[disabled],
.pill.grad-blue[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  filter: none
}

/* ==========================
   Data Diri Revamp (Profile)
   Scoped to #profile
   ========================== */
#profile .profile-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(255, 135, 2, .18), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(103, 37, 161, .25), transparent 60%),
    linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

#profile .profile-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120%;
  background: radial-gradient(50% 40% at 70% 0%, rgba(242, 109, 126, .25), transparent 60%);
  pointer-events: none;
  filter: blur(30px)
}

#profile .ph-left {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1
}

#profile .ph-avatar {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  background: var(--grad-2);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 28px rgba(7, 115, 79, .35)
}

#profile .ph-avatar.img {
  overflow: hidden
}

#profile .ph-avatar.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px
}

#profile .ph-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px
}

#profile .chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: #eaeef7;
  font-weight: 700
}

#profile .chip.grad {
  background: var(--grad-1);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255, 135, 2, .25)
}

#profile .chip.hero {
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255, 135, 2, .25), 0 2px 0 rgba(0, 0, 0, .35)
}

#profile .chip.glow {
  background: linear-gradient(90deg, var(--orange), var(--pink));
  color: #111;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(242, 109, 126, .35), 0 2px 0 rgba(0, 0, 0, .2)
}

#profile .ph-right {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1
}

#profile .comp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02))
}

#profile .comp-text .big {
  font-weight: 900;
  font-size: 1.1rem
}

#profile .profile-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin-top: 14px
}

#profile .glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  backdrop-filter: blur(8px)
}

#profile .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

#profile .info-row {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #12131a;
  border: 1px solid var(--line)
}

#profile .info-row .label {
  color: var(--muted)
}

#profile .program-card.gradient {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 400px at 10% -20%, rgba(255, 135, 2, .18), transparent 60%),
    radial-gradient(800px 500px at 120% 0%, rgba(103, 37, 161, .25), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

#profile .program-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

#profile .program-stats {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px
}

#profile .ps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #12131a;
  border: 1px solid var(--line)
}

#profile .ps-label {
  color: var(--muted)
}

#profile .program-cta {
  display: flex;
  gap: 10px
}

#profile .pref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 10px 0
}

#profile .pref-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px
}

#profile .pref-grid input,
#profile .pref-grid textarea {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f1118;
  color: #fff;
  resize: none
}

#profile .pref-grid textarea {
  min-height: 60px
}

#profile .pref-actions {
  display: none
}

/* Dashboard Profile Summary */
#dashboard .dash-profile {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin: 20px 0 12px;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  background:
    radial-gradient(900px 420px at -10% 0%, rgba(255, 135, 2, .18), transparent 60%),
    radial-gradient(900px 420px at 120% -10%, rgba(103, 37, 161, .22), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

#dashboard .dash-profile::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: .4;
  background: conic-gradient(from 0deg, rgba(255, 135, 2, .35), rgba(103, 37, 161, .35), rgba(242, 109, 126, .35), rgba(255, 135, 2, .35))
}

#dashboard .dp-left {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1
}

#dashboard .dp-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1rem;
  background: var(--grad-2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08)
}

#dashboard .dp-avatar.img {
  background: none;
  overflow: hidden
}

#dashboard .dp-avatar.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px
}

#dashboard .dp-name {
  font-weight: 900;
  font-size: 1.2rem
}

#dashboard .dp-bio {
  color: #cfd3de;
  opacity: .9;
  margin: .2rem 0 .4rem
}

#dashboard .dp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

#dashboard .dp-badges .chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
  color: #eaeef7;
  font-weight: 800
}

#dashboard .dp-badges .chip.hero {
  background: linear-gradient(90deg, var(--orange), var(--pink));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255, 135, 2, .25), 0 2px 0 rgba(0, 0, 0, .2)
}

#dashboard .dp-right .comp-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02))
}

.agenda .left {
  display: flex;
  gap: 10px;
  align-items: center
}

.agenda .ic {
  width: 24px;
  height: 24px;
  color: var(--pink)
}

.agenda .meta {
  color: var(--muted);
  font-size: .9rem
}

.agenda .right {
  text-align: right
}

.agenda .right .date {
  color: #cfd3de;
  font-weight: 600
}

.agenda .tag.live {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 6px 0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(7, 115, 79, .35);
  background: radial-gradient(120% 120% at 0% 0%, rgba(81, 193, 123, .25), transparent 55%),
    linear-gradient(90deg, rgba(7, 115, 79, .9), rgba(38, 191, 255, .65));
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px
}

/* Targets */
.targets {
  display: grid;
  gap: 8px
}

.target-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: radial-gradient(120% 100% at -10% 50%, rgba(103, 37, 161, .25), transparent), #12131a;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02)
}

.target-item .left {
  display: flex;
  align-items: center;
  gap: 10px
}

.target-item .bullet {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(255, 135, 2, .15)
}

.target-item.done {
  opacity: .85;
  background: radial-gradient(120% 100% at -10% 50%, rgba(7, 115, 79, .25), transparent), #12131a
}

.target-item.done .left span:last-child {
  text-decoration: line-through
}

.target-item input[type="checkbox"] {
  width: 16px;
  height: 16px
}

.add-target {
  margin-top: 10px
}

.small {
  padding: 6px 10px;
  font-weight: 700
}

/* Dashboard bottom revamp */
#dashboard {
  padding-bottom: 24px
}

#dashboard .dash-bottom {
  margin-top: 20px;
  gap: 18px;
  align-items: stretch
}

#dashboard .dash-bottom .card {
  min-height: auto
}

#dashboard .target-mini.gradient {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(580px 360px at -10% 0%, rgba(255, 135, 2, .12), transparent 60%),
    radial-gradient(560px 340px at 120% 10%, rgba(103, 37, 161, .18), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

#dashboard .targets.compact .target-item {
  padding: 10px 12px
}

#dashboard .targets.compact .target-item .bullet {
  box-shadow: 0 0 0 4px rgba(255, 135, 2, .15)
}

#dashboard .latest-card.gradient {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(520px 320px at 0% -10%, rgba(242, 109, 126, .14), transparent 60%),
    radial-gradient(560px 360px at 120% 0%, rgba(103, 37, 161, .16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
}

#dashboard .latest-list {
  display: grid;
  gap: 10px
}

#dashboard .latest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #12131a;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}

#dashboard .latest-item:hover {
  border-color: rgba(255, 255, 255, .16)
}

#dashboard .latest-item:focus-visible {
  outline: 2px solid rgba(242, 109, 126, .55);
  outline-offset: 2px
}

#dashboard .latest-left {
  display: flex;
  align-items: center;
  gap: 10px
}

#dashboard .latest-ic {
  width: 22px;
  height: 22px;
  color: #F26D7E
}

#dashboard .latest-title {
  color: #eaeef7;
  font-weight: 700
}

#dashboard .latest-meta {
  color: var(--muted);
  font-size: .9rem
}

  #dashboard .pill.kind {
    background: #F26D7E;
    color: #111;
    font-weight: 800
  }

  #dashboard .latest-list .pill.kind.small {
    position: relative;
    font-size: 0;
  }

  #dashboard .latest-list .pill.kind.small::after {
    content: '→';
    font-size: 0.9rem;
    font-weight: 800;
  }

/* Materials stats */
#materials .mat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 22px 0 16px
}

#materials .mat-stats.compact .stat-tile,
#materials .mat-stats.compact .progress-card {
  padding: 12px
}

#materials .stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  border-radius: 14px
}

/* Flatten gradient cards into simple text blocks */
#materials .stat-tile.grad-1,
#materials .stat-tile.grad-2,
#materials .stat-tile.grad-3 {
  background: transparent;
  border: 0;
}

#materials .stat-head {
  color: #cfd3de;
  font-size: .85rem
}

#materials .stat-val {
  font-size: 1.25rem;
  font-weight: 900
}

#materials .progress-card {
  background: transparent;
  border: 0;
  border-radius: 0;
}

#materials .pc-head {
  font-weight: 800;
  margin-bottom: 4px;
  font-size: .95rem
}

#materials .pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

#materials .pc-label {
  color: var(--muted)
}

#materials .pc-val {
  font-size: 1.2rem;
  font-weight: 900
}

/* single-number progress */
#materials .pc-single {
  font-size: 1.6rem;
  font-weight: 900;
  margin-top: 6px
}

/* Flatten filterbar background for Materials (no gradient band) */
#materials .filterbar {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
}

/* Global stats pills inside filterbar */
#materials .filterbar {
  gap: 10px
}

#materials .global-stats {
  display: flex;
  gap: 8px;
  margin-left: auto
}

#materials .g-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}

#materials .g-label {
  color: #cfd3de;
  font-size: .85rem
}

#materials .g-val {
  font-weight: 900;
  font-variant-numeric: tabular-nums
}

/* BBM Archive (new layout) */
/* Hero card is visually hidden so section starts langsung ke selector,
   tetapi dibiarkan di HTML untuk menjaga struktur & copy text. */
#bbm .bbm-hero {
  display: none;
}

#bbm .bbm-hero-left {
  max-width: 540px
}

#bbm .bbm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 24, .85);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: .72rem;
}

#bbm .bbm-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  color: #111;
  font-weight: 800;
  font-size: .7rem;
}

#bbm .bbm-pill-text {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #e7e9f3;
}

#bbm .bbm-hero-title {
  margin: .45rem 0 .3rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.grad-text {
  background: linear-gradient(90deg, #ffdd9b, #ff9fd4, #b89cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Soft white gradient text for BBM headings */
.grad-white {
  background: linear-gradient(90deg, #ffffff, #f6f3ff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#bbm .bbm-hero-sub {
  margin: 0;
  font-size: .9rem;
  color: #cfd3de;
  max-width: 520px;
}

#bbm .bbm-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: .78rem;
}

#bbm .bbm-mode-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 24, .85);
  border: 1px solid rgba(255, 255, 255, .12);
}

#bbm .bbm-mode-chip strong {
  color: #77f2c9
}

#bbm .bbm-mode-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 24, .85);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #cfd3de;
}

#bbm .bbm-mode-note .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ef1b4;
}

#bbm .bbm-step {
  margin-top: 18px;
  display: none
}

#bbm .bbm-step.active {
  display: block
}

/* Fullscreen-style first step untuk BBM: selector memenuhi lebar konten */
#bbm .bbm-step-full {
  margin-top: 6px;
}

#bbm .bbm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

#bbm .bbm-selector {
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#bbm .bbm-selector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
}

#bbm .bbm-selector-head h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

#bbm .bbm-selector-head p {
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
}

#bbm .bbm-tag {
  font-size: .72rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 24, .9);
  border: 1px solid rgba(255, 255, 255, .16);
  white-space: nowrap;
}

#bbm .bbm-field {
  margin-bottom: 12px;
  padding: 0;
  border: none;
  background: transparent;
}

#bbm .bbm-field label {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin-bottom: 4px;
}

#bbm .bbm-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(12, 13, 20, .95);
}

#bbm .bbm-search-icon {
  color: var(--muted);
  display: grid;
  place-items: center;
}

#bbm .bbm-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fog);
  font-size: 1rem;
  padding: 6px 0;
}

#bbm .bbm-search-input::placeholder {
  color: var(--muted);
}

#bbm .bbm-load-more {
  margin: 12px auto 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(21, 22, 29, .95);
  color: var(--fog);
  font-size: .9rem;
  cursor: pointer;
}

#bbm .bbm-load-more:hover {
  border-color: rgba(255, 255, 255, .2);
}

#bbm .bbm-select-wrap {
  position: relative;
}

#bbm .bbm-select-wrap .select {
  width: 100%;
  padding-right: 28px;
  background: #0f1118;
}

#bbm .bbm-select-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  color: var(--muted);
  pointer-events: none;
}

#bbm .bbm-subject-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--muted);
  margin: 12px 2px 8px;
}

#bbm .bbm-subject-stats {
  color: #eaeef7
}

#bbm .bbm-empty {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .18);
  background: #101118;
  margin-bottom: 8px;
}

#bbm .bbm-empty .title {
  margin: 0 0 4px;
  font-size: .9rem;
}

#bbm .bbm-empty .hint {
  margin: 0;
  font-size: .8rem;
  color: var(--muted);
}

#bbm .bbm-subject-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#bbm .bbm-subject-card {
  position: relative;
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(900px 480px at 0% 0%, rgba(255, 135, 2, .10), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(103, 37, 161, .18), transparent 60%),
    linear-gradient(180deg, rgba(15, 17, 24, .98), rgba(15, 17, 24, .96));
  color: #f7f5ff;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#bbm .bbm-subject-card::before {
  content: \"\";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 0 0, rgba(255, 135, 2, .25), transparent 60%);
  opacity: .15;
  pointer-events: none;
}

#bbm .bbm-subject-card.is-active {
  border-color: #b39dff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, .7);
}

#bbm .bbm-subject-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .32);
}

#bbm .bbm-subject-main {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

#bbm .bbm-subject-code {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #d8ddf0;
}

#bbm .bbm-subject-title {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(90deg, #ffffff, #f6f3ff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#bbm .bbm-subject-mapel {
  font-size: .85rem;
  color: #cfd3de;
}

#bbm .bbm-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 17, 24, .85);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .7rem;
}

#bbm .bbm-subject-progress {
  position: relative;
  margin-top: 8px;
}

#bbm .bbm-subject-progress-line {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: #cfd3de;
  margin-bottom: 4px;
}

#bbm .bbm-subject-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #12131a;
  overflow: hidden;
}

#bbm .bbm-subject-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5ef1b4, #f0ff9b);
}

#bbm .bbm-selector-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Hide legacy Lanjutkan button; interaksi sekarang lewat klik kartu */
#bbm #bbmStepNext {
  display: none
}

/* Step 1 info card dihilangkan agar layout fokus ke selector */
#bbm .bbm-info {
  display: none;
}

#bbm .bbm-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 0%, rgba(255, 135, 2, .3), transparent 60%);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 1.5rem;
}

#bbm .bbm-info-body .title {
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: 2px;
}

#bbm .bbm-info-body .hint {
  font-size: .78rem;
  margin: 0;
}

#bbm .bbm-archive {
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#bbm .bbm-archive-head {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 6px;
}

#bbm .bbm-back {
  all: unset;
  cursor: pointer;
  font-size: .78rem;
  color: var(--muted);
}

#bbm .bbm-back:hover {
  color: #f1f5ff
}

#bbm .bbm-archive-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  margin-bottom: 10px;
}

#bbm .bbm-archive-hero .kode {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

/* Sembunyikan label kecil di atas header utama BBM arsip */
#bbm #bbmSubjectCode {
  display: none
}

#bbm .bbm-archive-hero .title {
  margin: 2px 0 4px;
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(90deg, #ffffff, #f6f3ff, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#bbm .bbm-archive-hero .subtitle {
  margin: 0;
  font-size: .9rem;
  color: #cfd3de;
}

#bbm .bbm-archive-hero .right {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

#bbm .bbm-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 17, 24, .9);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .7rem;
}

/* Sembunyikan badge ringkasan (angkatan, jumlah sesi, progress waktu program) di header arsip BBM */
#bbm #bbmArchiveBadges {
  display: none;
}

#bbm .bbm-archive-note {
  font-size: .9rem;
  color: #cfd3de;
  margin: 0 0 10px;
}

#bbm .bbm-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  margin-bottom: 8px;
}

#bbm .bbm-search-wrap {
  position: relative;
  flex: 1;
  min-width: 160px;
}

#bbm .bbm-search-wrap .search {
  width: 100%;
  padding-right: 26px;
}

#bbm .bbm-search-wrap .icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  color: var(--muted);
}

#bbm .bbm-filters .bbm-search-wrap {
  position: relative;
  border-radius: 14px;
  padding: 8px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

#bbm .bbm-filters .bbm-search-wrap .search {
  border: none;
  background: transparent;
  padding: 8px 24px 8px 0;
  color: #f5f7ff;
}

#bbm .bbm-filters .bbm-search-wrap .search::placeholder {
  color: rgba(207, 211, 222, .7);
}

#bbm .bbm-filters .bbm-search-wrap .icon {
  right: 10px;
  color: rgba(245, 247, 255, .65);
}

#bbm .bbm-filter-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

#bbm .bbm-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #0f1114;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: .72rem;
}

#bbm .bbm-sort span:first-child {
  color: var(--muted)
}

#bbm .bbm-sort .select.inline {
  border: 1px solid rgba(255, 255, 255, .16);
  background: #151823;
  color: #f5f7ff;
  padding: 4px 10px;
  min-width: 0;
  font-size: .72rem;
  border-radius: 999px;
  color-scheme: dark;
}

#bbm .bbm-sort .select.inline option {
  background: #ffffff;
  color: #111827;
}

#bbm .bbm-toggle {
  cursor: pointer;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .72rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0f1114;
  color: #eaeef7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#bbm .bbm-toggle.active {
  background: rgba(34, 197, 94, .16);
  border-color: rgba(34, 197, 94, .7);
  color: #bbf7d0;
}

#bbm .bbm-toggle .emoji {
  font-size: .85rem
}

#bbm .bbm-filter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 10px;
}

#bbm .bbm-filter-meta .strong {
  color: #eaeef7;
  font-weight: 600
}

#bbm .bbm-filter-meta .hint {
  font-size: .7rem;
  color: #bbf7d0
}

#bbm .bbm-session-list {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* .bbm-session-card uses global .mat-card styles */
#bbm .bbm-session-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#bbm .bbm-session-date {
  font-size: .82rem;
  color: var(--muted);
}

#bbm .bbm-session-title {
  font-weight: 700;
  margin: 4px 0 4px;
  font-size: 1.02rem;
}

#bbm .bbm-session-sub {
  color: #d1d5e5;
  font-size: .86rem;
}

#bbm .bbm-session-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #0f1118;
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .7rem;
  color: #cfd3de;
}

#bbm .bbm-session-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#bbm .bbm-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .7rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #101118;
}

#bbm .bbm-tag-pill.rec {
  border-color: rgba(52, 211, 153, .7);
  background: rgba(4, 120, 87, .4);
  color: #bbf7d0
}

#bbm .bbm-tag-pill.pdf {
  border-color: rgba(56, 189, 248, .7);
  background: rgba(15, 23, 42, .8);
  color: #bae6fd
}

#bbm .bbm-tag-pill.task {
  border-color: rgba(251, 191, 36, .7);
  background: rgba(24, 20, 4, .85);
  color: #fde68a
}

#bbm .bbm-tag-pill.sol {
  border-color: rgba(244, 114, 182, .7);
  background: rgba(76, 29, 149, .7);
  color: #fce7f3
}

#bbm .bbm-tag-pill.disc {
  border-color: rgba(148, 163, 184, .7);
  background: rgba(15, 23, 42, .85);
  color: #e2e8f0
}

#bbm .bbm-session-foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .85rem;
  color: var(--muted);
}

#bbm .bbm-session-foot .hint {
  font-size: .78rem
}

/* Progress & navigation row inside BBM session cards */
#bbm .bbm-learn-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #eaeef7;
  font-size: .9rem;
}

#bbm .bbm-open-materials {
  border: none;
  background: none;
  color: #cfd3de;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#bbm .bbm-open-materials:hover {
  color: #ffffff;
}

#bbm .stat-tile.grad-1 {
  background: radial-gradient(600px 320px at -10% 0%, rgba(255, 135, 2, .18), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line)
}

#bbm .stat-tile.grad-2 {
  background: radial-gradient(600px 320px at 110% -10%, rgba(103, 37, 161, .22), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line)
}

#bbm .stat-tile.grad-3 {
  background: radial-gradient(600px 320px at 50% 120%, rgba(242, 109, 126, .18), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line)
}

#bbm .stat-head {
  color: #cfd3de;
  font-size: .85rem
}

#bbm .stat-val {
  font-size: 1.25rem;
  font-weight: 900
}

#bbm .progress-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  border-radius: 14px
}

#bbm .pc-head {
  font-weight: 800;
  margin-bottom: 4px;
  font-size: .95rem
}

#bbm .pc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px
}

@media (max-width: 640px) {
  #bbm .bbm-selector-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #bbm .bbm-tag {
    align-self: flex-start;
  }

  #bbm .bbm-field {
    padding: 0;
  }

  #bbm .bbm-subject-head {
    margin: 6px 0 8px;
    font-size: .72rem;
  }

  #bbm .bbm-subject-list {
    gap: 10px;
  }

  #bbm .bbm-subject-card {
    padding: 12px;
    border-radius: 16px;
  }

  #bbm .bbm-subject-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #bbm .bbm-subject-title {
    font-size: .95rem;
  }

  #bbm .bbm-badge {
    align-self: flex-start;
    font-size: .68rem;
  }

  #bbm .bbm-subject-progress-line {
    font-size: .72rem;
  }

  #bbm .bbm-archive {
    padding: 0;
    border-radius: 0;
  }

  #bbm .bbm-archive-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  #bbm .bbm-archive-hero .title {
    font-size: 1.05rem;
  }

  #bbm .bbm-archive-hero .subtitle {
    font-size: .85rem;
  }

  #bbm .bbm-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    border-radius: 0;
  }

  #bbm .bbm-search-wrap {
    min-width: 0;
  }

  #bbm .bbm-filter-right {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  #bbm .bbm-sort {
    flex: 1 1 100%;
    justify-content: space-between;
    padding: 6px 10px;
  }

  #bbm .bbm-sort .select.inline {
    font-size: .7rem;
    padding: 4px 8px;
  }

  #bbm .bbm-toggle {
    flex: 1 1 100%;
    justify-content: center;
    padding: 6px 10px;
  }

  #bbm .bbm-filter-meta {
    margin-bottom: 6px;
  }

  #bbm .bbm-session-list {
    max-height: none;
    overflow: visible;
    gap: 10px;
  }

  #bbm .bbm-session-card.mat-card {
    padding: 14px;
    border-radius: 16px;
  }

  #bbm .bbm-session-card .mc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #bbm .bbm-session-card .mc-right {
    width: 100%;
    justify-content: flex-start;
  }

  #bbm .bbm-session-card .mc-meta {
    font-size: .8rem;
    flex-wrap: wrap;
    gap: 6px;
  }

  #bbm .bbm-session-card .mc-title.sm {
    font-size: 1rem;
    margin: .15rem 0 .35rem;
  }

  #bbm .bbm-session-sub {
    font-size: .82rem;
  }

  #bbm .bbm-session-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  #bbm .bbm-learn-check {
    font-size: .85rem;
  }

  #bbm .bbm-open-materials {
    font-size: .82rem;
  }
}

.course {
  color: #fff;
  position: relative;
  overflow: hidden
}

.course.gradient-1 {
  background: var(--grad-1)
}

.course.gradient-2 {
  background: var(--grad-2)
}

.course.gradient-3 {
  background: var(--grad-3)
}

.course .meta {
  opacity: .95;
  margin: .4rem 0 1rem
}

.pill {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 999px;
  border: 0;
  color: #111;
  background: #F0F4F3;
  font-weight: 700
}

.pill.large {
  padding: 12px 16px
}

.hero {
  text-align: left;
  padding: 28px
}

.hero h2 {
  margin: 0 0 8px 0
}

.habit {
  display: flex;
  align-items: center;
  gap: 10px
}

.habit input {
  width: 18px;
  height: 18px
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 45vh;
  overflow: auto
}

.msg {
  padding: 10px 12px;
  border-radius: 12px;
  width: fit-content;
  max-width: 90%
}

.msg.bot {
  background: #14161f;
  border: 1px solid var(--line)
}

/* Under Construction (Labubu) */
#labubu .uc-card {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid var(--line)
}

#labubu .uc-blur {
  position: absolute;
  inset: -20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: radial-gradient(600px 300px at -10% 0%, rgba(255, 135, 2, .15), transparent 60%),
    radial-gradient(600px 300px at 110% 0%, rgba(103, 37, 161, .18), transparent 60%);
  opacity: .9
}

#labubu .uc-content {
  position: relative;
  text-align: center
}

#labubu .uc-title {
  font-weight: 900;
  font-size: 1.4rem
}

#labubu .uc-sub {
  color: var(--muted);
  margin-top: 6px
}

.msg.me {
  background: #0d2b21;
  border: 1px solid rgba(7, 115, 79, .35)
}

.composer {
  display: flex;
  gap: 8px
}

.composer input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0f1118;
  color: #fff
}

@media (max-width:1100px) {
  .kpis {
    grid-template-columns: repeat(2, 1fr)
  }

  .grid.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch
  }

  .grid.three {
    grid-template-columns: 1fr 1fr
  }

  .table .thead,
  .table .tbody>div {
    grid-template-columns: 2.4fr repeat(3, 1fr) 1.2fr;
  }
}

@media (max-width:820px) {
  .app {
    grid-template-columns: 1fr
  }

  /* Mobile off-canvas sidebar */
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      height: 100vh;
      z-index: 50;
      width: 260px;
      transform: translateX(-110%);
      will-change: transform;
      box-shadow: none;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

  .app:not(.is-collapsed) .sidebar {
    transform: translateX(0);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55)
  }

  /* Scrim overlay when sidebar is open */
  .sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 40;
    display: none;
    pointer-events: none
  }

  @media (max-width: 960px) {
    .app:not(.is-collapsed) .sidebar-scrim {
      display: block;
      pointer-events: auto
    }
  }

  /* Ensure collapse styles don't zero-out padding on mobile */
  .app.is-collapsed .sidebar {
    padding: 24px 18px;
    border-right: 0;
    box-shadow: none;
    transform: translateX(-110%)
  }

  /* Show the hamburger only on mobile */
  #openSidebar {
    display: inline-grid
  }

  .content {
    padding: 18px
  }

  .grid.three {
    grid-template-columns: 1fr
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .span-2 {
    grid-column: span 1
  }
}

@media (min-width:821px) {

  /* Hide the hamburger on larger screens */
  #openSidebar {
    display: none
  }
}

@media (max-width:600px) {

  .kpis,
  .kpis.three {
    grid-template-columns: 1fr
  }

  #materials .mat-stats,
  #bbm .bbm-stats {
    grid-template-columns: 1fr
  }

  /* Stack grids on mobile */
  .grid.two {
    grid-template-columns: 1fr
  }

  /* Materials & Rekaman: stack filters vertically on small screens */
  #materials .materials-filterbar {
    flex-direction: column;
    align-items: stretch;
  }

  #materials .materials-filterbar .select,
  #materials .materials-filterbar .search,
  #materials .materials-filterbar .pill,
  #materials .materials-filterbar .checkbox {
    width: 100%;
  }

  /* Tugas Kelas: mobile-friendly layout */
  #tugas .tugas-filterbar {
    flex-direction: column;
    align-items: stretch;
  }

  #tugas .tugas-filterbar .select,
  #tugas .tugas-filterbar .search,
  #tugas .tugas-filterbar .checkbox {
    width: 100%;
  }

  .tugas-card-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .tugas-right {
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
  }

  .tugas-status {
    align-items: flex-start;
  }

  .content {
    padding: 16px 14px 20px;
  }

  .page-header h1 {
    font-size: 1.32rem;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .page-header .subtitle {
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .search {
    min-width: 140px;
    flex: 1
  }

  .filterbar {
    gap: 8px
  }

  .table {
    overflow: auto
  }

  .table .thead,
  .table .tbody>div {
    min-width: 720px
  }

  /* Exam Calendar Mobile Fixes */
  .exam-body {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .exam-count {
    width: 100%;
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  .exam-count .big {
    font-size: 2rem
  }

  /* Dashboard Profile Mobile Fixes */
  #dashboard .dash-profile {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px
  }

  #dashboard .dp-left {
    width: 100%
  }

  #dashboard .dp-right {
    width: 100%;
    margin-top: 12px
  }

  /* Chart Scaling */
  .chart svg#weeklyChart {
    height: auto;
    min-height: 180px
  }

  /* Adjust stats font size */
  .kpi .stat {
    font-size: 1.4rem
  }

  .kpi .stat.big {
    font-size: 1.8rem
  }

  /* Dashboard hero & actions spacing */
  #dashboard .dash-profile {
    margin-top: 12px;
  }

  #dashboard .dp-name {
    font-size: 1.08rem;
  }

  #dashboard .dp-bio {
    margin: .15rem 0 .35rem;
    font-size: .9rem;
  }

  /* Highlight logout on mobile */
  #btnSignOut {
    border-radius: 999px;
    padding-inline: 14px;
    font-weight: 700;
    background: radial-gradient(120% 120% at 0% 0%, rgba(255,135,2,.25), transparent 60%);
    border-color: rgba(255, 255, 255, .35);
  }

  #btnSignOut:hover {
    background: radial-gradient(120% 120% at 0% 0%, rgba(255,135,2,.4), transparent 60%);
  }

  /* Profile / Data Diri Mobile Tweaks */
  #profile .profile-hero {
    padding: 14px;
    border-radius: 16px
  }

  #profile .ph-left {
    align-items: flex-start
  }

  #profile .ph-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.05rem
  }

  #profile .ph-badges {
    flex-direction: column;
    align-items: flex-start
  }

  #profile .chip {
    width: auto;
    max-width: 100%;
    text-align: left;
    font-size: .78rem;
    padding-inline: 10px
  }

  #profile .profile-grid {
    grid-template-columns: 1fr
  }

  #profile .info-grid {
    grid-template-columns: 1fr;
    gap: 8px
  }

  #profile .info-row {
    grid-template-columns: 1fr;
    row-gap: 4px
  }

  #profile .info-row .value {
    font-weight: 600
  }

  #profile .pref-grid textarea {
    min-height: 72px
  }

  #profile .profile-card .actions {
    display: flex;
    flex-direction: column;
    gap: 8px
  }

  #profile .profile-card .actions .pill {
    width: 100%;
    justify-content: center
  }
}

/* Habits extensions */
.heatmap {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 6px 2px
}

.hm-col {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.hm {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #1a1e2a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04)
}

.hm[data-lvl="1"] {
  background: #2a5b3f
}

.hm[data-lvl="2"] {
  background: #3d8f5c
}

.hm[data-lvl="3"] {
  background: #51c17b
}

.hm[data-lvl="4"] {
  background: #76f0a3
}

.legend .hm-sample {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin: 0 4px;
  vertical-align: middle;
  background: #1a1e2a
}

.legend .hm-sample[style*="--lvl:1"] {
  background: #2a5b3f
}

.legend .hm-sample[style*="--lvl:2"] {
  background: #3d8f5c
}

.legend .hm-sample[style*="--lvl:3"] {
  background: #51c17b
}

.legend .hm-sample[style*="--lvl:4"] {
  background: #76f0a3
}

.bar {
  position: relative;
  height: 10px;
  background: #151926;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px
}

.bar .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #FF8702, #F26D7E);
  border-radius: 999px;
  transition: width .4s ease
}

/* Streak emoji */
.card.kpi.streak {
  position: relative
}

.card.kpi.streak .kpi-emoji {
  position: absolute;
  right: 14px;
  top: 12px;
  font-size: 22px;
  filter: saturate(120%);
  opacity: .9
}

/* Log history list */
#logHistoryList {
  display: grid;
  gap: 10px
}

#streakDetailList {
  display: grid;
  gap: 10px
}

#streakDetailList .row.streak-day {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01))
}

#streakDetailList .row .title {
  font-weight: 600
}

#streakDetailList .row .meta {
  color: var(--muted);
  font-size: .9rem
}

.streak-detail-summary {
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4
}

#logHistoryList .row.log-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01))
}

#logHistoryList .row .title {
  font-weight: 600
}

#logHistoryList .row .meta {
  color: var(--muted);
  font-size: .9rem
}

#logHistoryList .row .reflection {
  color: var(--muted);
  font-size: .9rem;
  margin-top: 4px;
  font-style: italic
}

#logHistoryList .row .cell.right {
  display: flex;
  align-items: center;
  gap: 8px
}

.pill.danger {
  background: #DC2A38;
  color: #fff
}

/* Mini link */
.mini-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}

.mini-link:hover {
  text-decoration: underline;
  color: #e8ebf1
}

.mini-link.right {
  align-self: flex-end
}

/* Total Belajar actions alignment */
.total-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.total-actions .actions-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px
}

.mini-link.center {
  align-self: center
}

/* Daily Targets */
#dailyTargets {
  display: grid;
  gap: 6px;
  margin-top: 8px
}

#dailyTargets .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem
}

#dailyRing {
  margin-bottom: 4px
}

/* Daily Quest – collapsed header + expanded list */
.dt-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6px
}

.dt-head.minimal .mini-link {
  font-size: 12px
}

#dashboard .dt-subline {
  margin-top: 2px
}

/* Expand downward with animation */
#dailyTargets {
  margin-top: 8px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .28s ease, opacity .2s ease
}

#dailyTargets:not(.collapsed) {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px;
  max-height: 520px;
  opacity: 1
}

#dailyTargets.collapsed {
  display: none !important
}

.daily-targets .item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem
}

.daily-targets .item input {
  accent-color: #FF8702
}

.dt-close {
  text-align: right;
  margin-top: 2px
}

/* Ensure hamburger stays visible */
.topbar #openSidebar {
  display: inline-grid;
  opacity: 1;
  visibility: visible
}

.app.is-collapsed #openSidebar {
  opacity: 1;
  visibility: visible
}

/* Align Total Belajar actions to the card's right */
.card.kpi .total-actions {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end
}

.card.kpi .total-actions .actions-right {
  align-items: center
}

/* Exam Calendar */
.exam-card {
  padding-top: 14px;
  height: 100%
}

.exam-card .exam-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px 4px;
  border-bottom: 1px solid var(--line)
}

.exam-card .exam-head .lh {
  display: flex;
  align-items: center;
  gap: 8px
}

.exam-body {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
  padding-top: 8px;
  align-items: start
}

.exam-list {
  display: grid;
  gap: 10px
}

.exam-item {
  display: flex;
  gap: 8px;
  align-items: flex-start
}

.exam-item .bar {
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #a4b0ff, #6a7bff)
}

.exam-chip {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 10px;
  display: grid;
  gap: 2px
}

.exam-chip .date {
  color: var(--muted);
  font-size: .85rem
}

.exam-chip .title {
  font-weight: 700
}

.exam-count {
  align-self: start;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: 14px
}

.exam-count .big {
  font-size: 28px;
  font-weight: 800
}

.exam-count .sub {
  color: var(--muted)
}

/* Allow multiple countdown cards stacked in the right column */
.exam-counts {
  display: grid;
  gap: 10px;
  align-self: start
}

.grid.two>.card {
  height: 100%
}

.latest-card {
  padding-top: 14px
}

.target-mini {
  margin-top: 18px
}


.grid.two>.card {
  height: 100%;
  display: flex;
  flex-direction: column
}



.target-mini {
  margin-top: 24px
}

/* Loading Overlay */
#loadingOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px)
}

#loadingOverlay.show {
  display: flex
}

#loadingOverlay .loader-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35)
}

#loadingOverlay .loader-text {
  font-weight: 700;
  letter-spacing: .2px
}

#loadingOverlay .spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #FF8702;
  border-right-color: #F26D7E;
  animation: spin 0.9s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}