/* ═══════════════════════════════════════════════════════════════
   Presisi · komponen bersama (kelompok "shared")
   Tombol .s-btn-*, kepala halaman lama, .card, semua modal/overlay/popup,
   toast & banner, layar batas (cap), pill/badge, progres, skeleton,
   avatar/bezel, keadaan kosong. Selector selalu diawali .ps-ui, jadi
   kerangka klasik tidak terpengaruh.
   Urutan muat: student.css → presisi.css → shared.css → CSS kelompok
   halaman. Aturan konteks di kelompok halaman tetap menang atas aturan
   umum di sini (spesifisitas sama, dimuat lebih akhir).
   ═══════════════════════════════════════════════════════════════ */

html.ps-ui {
  --psh-scrim: oklch(15% 0.04 258 / 0.45);
  --psh-ring: 0 0 0 3px oklch(34% 0.07 258 / 0.14);
  --psh-warn-bd: oklch(86% 0.06 80);
  --psh-kin-bd: oklch(88% 0.05 84);
  /* ikon garis (sama dengan sprite i-x, i-lock, i-check) untuk mask CSS */
  --psh-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --psh-i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --psh-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@keyframes psh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes psh-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ── 1. Tombol umum .s-btn-* ─────────────────────────────────────
   Hanya kulit (warna, garis, radius, bayangan). Padding/ukuran huruf
   dibiarkan ke aturan konteks lama (.s-sheet-btn, .bs-next, .kq-submit,
   .s-pack-paywall-cta, .s-sj-cell-btn, dst.) supaya tidak tertimpa.
   Tinggi minimum 44px dari student.css tetap berlaku. */
.ps-ui .s-btn-primary,
.ps-ui .s-btn-secondary {
  border: 1px solid transparent;
  border-radius: var(--ps-r);
  font-family: var(--ps-font);
  font-weight: 700;
  transition: background-color var(--ps-t) var(--ps-ease), border-color var(--ps-t) var(--ps-ease),
              color var(--ps-t) var(--ps-ease), opacity var(--ps-t) var(--ps-ease), transform var(--ps-t) var(--ps-ease);
}
.ps-ui .s-btn-primary {
  background: var(--ps-kon);
  border-color: var(--ps-kon);
  color: var(--ps-kon-on);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), var(--ps-sh-1);
}
.ps-ui .s-btn-primary:hover:not(:disabled) {
  background: var(--ps-kon-2);
  border-color: var(--ps-kon-2);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), var(--ps-sh-1);
}
.ps-ui .s-btn-primary:active:not(:disabled) { background: var(--ps-kon-2); }
.ps-ui .s-btn-secondary {
  background: var(--ps-surface);
  border-color: var(--ps-bd);
  color: var(--ps-tx);
  box-shadow: var(--ps-sh-1);
}
.ps-ui .s-btn-secondary:hover:not(:disabled) { background: var(--ps-surface); border-color: var(--ps-tx-3); }
.ps-ui .s-btn-secondary:active:not(:disabled) { background: var(--ps-sunken); }
.ps-ui .s-btn-primary:disabled,
.ps-ui .s-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.ps-ui .s-btn-primary:focus-visible,
.ps-ui .s-btn-secondary:focus-visible { outline: 2px solid var(--ps-kon-3); outline-offset: 2px; border-radius: var(--ps-r); }
/* tombol berupa tautan: isi rata tengah, tanpa garis bawah (spesifisitas rendah, aturan konteks tetap menang) */
:where(.ps-ui) a:where(.s-btn-primary, .s-btn-secondary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; text-decoration: none;
}
/* bahaya: garis netral, teks merah; merah penuh hanya saat hover */
.ps-ui .s-btn-danger { color: var(--ps-danger-tx); border-color: oklch(53% 0.17 25 / 0.35); }
.ps-ui .s-btn-danger:hover:not(:disabled) { background: var(--ps-danger-soft); border-color: var(--ps-danger); color: var(--ps-danger-tx); }
/* kecil: 36px di desktop, 44px di layar sentuh */
.ps-ui .s-btn-sm { min-height: 36px; padding: 6px 14px; font-size: var(--ps-fs-sm); line-height: 1.2; }
@media (pointer: coarse) { .ps-ui .s-btn-sm { min-height: 44px; } }


/* ── 2. Kepala halaman lama, tautan kembali, kartu generik ───────── */
.ps-ui .s-page-header { margin-bottom: 20px; }
.ps-ui .s-page-header h1 {
  margin-top: 2px; font-size: var(--ps-fs-3xl); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ps-tx);
}
.ps-ui .s-page-header > p { margin-top: 4px; max-width: 68ch; color: var(--ps-tx-2); }
.ps-ui .s-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0;
  font-size: var(--ps-fs-sm); font-weight: 700; color: var(--ps-tx-3);
  transition: color var(--ps-t) var(--ps-ease);
}
.ps-ui .s-back:hover { color: var(--ps-tx); }
.ps-ui .s-back .ps-i { width: 16px; height: 16px; }
@media (pointer: coarse) { .ps-ui .s-back { min-height: 44px; } }

.ps-ui .card {
  margin-bottom: 16px; padding: 20px;
  background: var(--ps-surface); border: 1px solid var(--ps-bd);
  border-radius: var(--ps-r-lg); box-shadow: var(--ps-sh-1);
}
.ps-ui .card h3 { margin-bottom: 12px; font-size: var(--ps-fs-md); font-weight: 700; color: var(--ps-tx); }

@media (max-width: 767px) {
  .ps-ui .s-page-header { margin-bottom: 16px; }
  .ps-ui .s-page-header h1 { font-size: var(--ps-fs-2xl); }
  .ps-ui .card { padding: 16px; }
}


/* ── 3. Tombol tutup ikon (modal, sheet, survei, promo, testimoni) ── */
.ps-ui :is(.s-modal-close, .sv-close, .promo-pop-x, .s-sheet-x, .tst-x) {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; border-radius: var(--ps-r);
  background: transparent; color: var(--ps-tx-3);
  font-size: 0; line-height: 0; cursor: pointer;
  transition: background-color var(--ps-t) var(--ps-ease), color var(--ps-t) var(--ps-ease);
}
.ps-ui :is(.s-modal-close, .sv-close, .promo-pop-x, .s-sheet-x, .tst-x)::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--psh-i-x) center / contain no-repeat; mask: var(--psh-i-x) center / contain no-repeat;
}
.ps-ui :is(.s-modal-close, .sv-close, .promo-pop-x, .s-sheet-x, .tst-x):hover { background: var(--ps-sunken); color: var(--ps-tx); }
@media (pointer: coarse) {
  .ps-ui :is(.s-modal-close, .sv-close, .promo-pop-x, .s-sheet-x, .tst-x) { top: 6px; right: 6px; width: 44px; height: 44px; min-width: 44px; }
}


/* ── 4. Modal .s-modal-backdrop + .s-modal (avatar, voucher, password,
      verifikasi, tawaran profil) ───────────────────────────────────
   Lapisan 1250: di atas widget pesan (1200/1201), di bawah laci HP (1300). */
.ps-ui .s-modal-backdrop {
  z-index: 1250; padding: 16px;
  background: var(--psh-scrim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ps-ui .s-modal-backdrop.visible { animation: psh-fade 160ms var(--ps-ease); }
.ps-ui .s-modal {
  padding: 24px 24px 20px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--ps-surface); color: var(--ps-tx);
  border: 1px solid var(--ps-bd); border-radius: var(--ps-r-xl);
  box-shadow: var(--ps-sh-pop);
  text-align: left;
  animation: psh-rise 200ms var(--ps-ease);
}
.ps-ui .s-modal-icon { display: none; }
.ps-ui .s-modal-title {
  margin: 0 40px 6px 0; font-size: var(--ps-fs-xl); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.3; text-align: left; color: var(--ps-tx);
}
.ps-ui .s-modal-sub { margin: 0 0 16px; font-size: var(--ps-fs-md); line-height: 1.55; text-align: left; color: var(--ps-tx-2); }
.ps-ui .s-modal-label { display: block; margin-top: 12px; font-size: var(--ps-fs-sm); font-weight: 700; text-align: left; color: var(--ps-tx); }
/* tombol aksi: berdampingan, turun bertumpuk (utama di atas) bila tidak muat */
.ps-ui .s-modal-actions { display: flex; flex-wrap: wrap-reverse; gap: 8px; margin: 20px 0 0; }
.ps-ui .s-modal-actions > :is(.s-btn-primary, .s-btn-secondary) { flex: 1 1 120px; white-space: nowrap; }
/* input kode voucher (gaya inline di kerangka: 15px memicu zoom iOS, jarak label terlalu jauh) */
.ps-ui #vc-redeem-code {
  margin-top: 6px !important; min-height: 46px; font-size: 16px !important;
  box-shadow: var(--ps-sh-1);
  transition: border-color var(--ps-t) var(--ps-ease), box-shadow var(--ps-t) var(--ps-ease);
}
.ps-ui #vc-redeem-code:focus { outline: none; border-color: var(--ps-kon-3) !important; box-shadow: var(--psh-ring); }
.ps-ui .s-avatar-preview {
  width: 112px; height: 112px; margin: 6px auto 4px;
  background: var(--ps-sunken); border: 1px solid var(--ps-bd);
  color: var(--ps-tx-3); font-size: var(--ps-fs-xs);
}
/* panel XP & progres di modal (markup lama, belum dipakai halaman aktif) */
.ps-ui .s-modal-xp-panel { margin-bottom: 16px; padding: 12px 14px; background: var(--ps-sunken); border: 1px solid var(--ps-bd-2); border-radius: var(--ps-r); }
.ps-ui .s-xp-label { color: var(--ps-tx-2); }
.ps-ui .s-xp-value { font-weight: 800; color: var(--ps-tx); font-variant-numeric: tabular-nums; }
.ps-ui .s-xp-value.accent { color: var(--ps-kin-hi); }
.ps-ui .s-xp-value.warn { color: var(--ps-warn-tx); }
.ps-ui .s-xp-hint { color: var(--ps-tx-3); }
.ps-ui .s-modal-upgrade { padding-top: 12px; border-top: 1px solid var(--ps-bd-2); font-size: var(--ps-fs-xs); color: var(--ps-tx-3); }
.ps-ui .s-modal-upgrade a { color: var(--ps-kin-hi); font-weight: 700; }
@media (max-width: 599px) {
  .ps-ui .s-modal { padding: 20px 18px 18px; }
}

/* modal kebijakan (.s-modal-overlay, mis. #modal-lifetime di /upgrade) */
.ps-ui .s-modal-overlay {
  padding: 16px; background: var(--psh-scrim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: psh-fade 160ms var(--ps-ease);
}
.ps-ui .s-modal-overlay .s-modal { max-width: 560px; }
.ps-ui .s-modal-overlay .s-modal h3 {
  margin: 0 40px 14px 0; font-size: var(--ps-fs-xl); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--ps-tx);
}
.ps-ui .s-modal-overlay .s-modal h4 {
  margin: 18px 0 6px; font-size: var(--ps-fs-xs); font-weight: 800;
  letter-spacing: 0.06em; color: var(--ps-tx-3); opacity: 1;
}
.ps-ui .s-modal-overlay .s-modal :is(p, li) { font-size: var(--ps-fs-md); line-height: 1.6; color: var(--ps-tx-2); }
.ps-ui .s-modal-overlay .s-modal :is(strong, b) { color: var(--ps-tx); }
.ps-ui .s-modal-overlay .s-modal ul { list-style: disc; }
.ps-ui .s-modal-overlay .s-modal ol { list-style: decimal; }
.ps-ui .s-modal-overlay .s-modal a,
.ps-ui .s-link-modal {
  color: var(--ps-kin-hi); border-bottom: 0; font-weight: 700;
  text-decoration: underline; text-decoration-color: oklch(47% 0.08 70 / 0.35); text-underline-offset: 3px;
  transition: text-decoration-color var(--ps-t) var(--ps-ease);
}
.ps-ui .s-modal-overlay .s-modal a:hover,
.ps-ui .s-link-modal:hover { opacity: 1; text-decoration-color: currentColor; }
.ps-ui .s-modal-note { padding-top: 12px; border-top: 1px solid var(--ps-bd-2); color: var(--ps-tx-3); }


/* ── 5. Info sheet (#s-info-sheet): sheet bawah di HP, dialog kecil di desktop ── */
.ps-ui .s-sheet-backdrop { background: var(--psh-scrim); }
.ps-ui .s-sheet {
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--ps-surface); color: var(--ps-tx);
  border: 1px solid var(--ps-bd); border-bottom: 0;
  border-radius: var(--ps-r-xl) var(--ps-r-xl) 0 0;
  box-shadow: var(--ps-sh-pop);
}
.ps-ui .s-sheet-ico { display: none; }
.ps-ui .s-sheet-title {
  margin: 0 44px 8px 0; font-family: var(--ps-font); font-size: var(--ps-fs-xl); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--ps-tx);
}
.ps-ui .s-sheet-body { font-size: var(--ps-fs-md); line-height: 1.6; color: var(--ps-tx-2); }
.ps-ui .s-sheet-body b { color: var(--ps-tx); }
.ps-ui .s-sheet-actions { gap: 8px; margin-top: 20px; }
.ps-ui .s-sheet-btn { min-height: 44px; padding: 10px 16px; border-radius: var(--ps-r); font-size: var(--ps-fs-md); font-weight: 700; }
@media (min-width: 600px) {
  .ps-ui .s-sheet { padding: 24px; border-bottom: 1px solid var(--ps-bd); border-radius: var(--ps-r-xl); }
  /* sama dengan modal: tombol utama di kanan */
  .ps-ui .s-sheet-actions { flex-direction: row; }
}


/* ── 6. Modal "segera hadir" (#s-cs-modal-overlay) ───────────────── */
.ps-ui .s-cs-modal-overlay {
  padding: 16px; background: var(--psh-scrim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: psh-fade 160ms var(--ps-ease);
}
.ps-ui .s-cs-modal-card {
  max-width: 420px; padding: 24px;
  background: var(--ps-surface); border: 1px solid var(--ps-bd);
  border-radius: var(--ps-r-xl); box-shadow: var(--ps-sh-pop);
  text-align: left;
  animation: psh-rise 200ms var(--ps-ease);
}
.ps-ui .s-cs-modal-eyebrow {
  display: inline-flex; align-items: center; height: 24px; margin: 0 0 12px; padding: 0 9px;
  border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--ps-bd);
  color: var(--ps-tx-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.ps-ui .s-cs-modal-title {
  margin: 0 0 8px; font-family: var(--ps-font); font-size: var(--ps-fs-xl); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--ps-tx);
}
.ps-ui .s-cs-modal-body { margin: 0 0 20px; font-size: var(--ps-fs-md); line-height: 1.6; color: var(--ps-tx-2); }
.ps-ui .s-cs-modal-actions { display: flex; justify-content: flex-end; }
.ps-ui .s-cs-modal-actions .s-btn-primary { flex: 0 0 auto; min-width: 140px; padding: 10px 20px; }
@media (max-width: 599px) {
  .ps-ui .s-cs-modal-card { padding: 20px 18px 18px; }
  .ps-ui .s-cs-modal-actions .s-btn-primary { flex: 1 1 auto; }
}


/* ── 7. Modal naik level (#s-lvl-modal-overlay) ─────────────────────
   Tanpa konfeti/gerak memantul; emas hanya untuk sorotan level baru. */
.ps-ui .s-lvl-modal-overlay {
  padding: 16px; background: var(--psh-scrim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: psh-fade 160ms var(--ps-ease);
}
.ps-ui .s-lvl-modal-card {
  max-width: 400px; padding: 28px 24px 24px;
  background: var(--ps-surface); border: 1px solid var(--ps-bd);
  border-radius: var(--ps-r-xl); box-shadow: var(--ps-sh-pop);
  animation: psh-rise 200ms var(--ps-ease);
}
.ps-ui .s-lvl-modal-confetti { display: none; }
.ps-ui .s-lvl-modal-eyebrow {
  display: inline-flex; align-items: center; height: 24px; margin-bottom: 12px; padding: 0 10px;
  border-radius: 999px; background: var(--ps-kin-soft); color: var(--ps-kin-hi);
  font-size: var(--ps-fs-xs); font-weight: 800; letter-spacing: 0.02em; text-transform: none;
}
.ps-ui .s-lvl-modal-h {
  margin: 0 0 12px; font-family: var(--ps-font); font-size: var(--ps-fs-3xl); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ps-tx); font-variant-numeric: tabular-nums;
}
.ps-ui .s-lvl-modal-new { color: var(--ps-kin-hi); font-weight: 800; }
.ps-ui .s-lvl-modal-tier-line,
.ps-ui .s-lvl-modal-tier-promo { margin: 0 0 16px; font-size: var(--ps-fs-md); color: var(--ps-tx-2); }
.ps-ui .s-lvl-modal-tier-promo {
  padding: 8px 12px; border-radius: var(--ps-r); font-weight: 400;
  background: var(--ps-kin-tint); box-shadow: inset 0 0 0 1px var(--psh-kin-bd);
}
.ps-ui .s-lvl-modal-tier-promo strong { color: var(--ps-tx); font-weight: 800; }
.ps-ui .s-lvl-modal-body { margin: 0 0 20px; font-size: var(--ps-fs-md); color: var(--ps-tx-2); font-variant-numeric: tabular-nums; }
.ps-ui .s-lvl-modal-body strong { color: var(--ps-tx); }
.ps-ui .s-lvl-modal-close { min-width: 180px; padding: 11px 24px; font-size: var(--ps-fs-md); }


/* ── 8. Survei onboarding (#sv-overlay) ───────────────────────────── */
.ps-ui #sv-overlay {
  padding: 16px; background: var(--psh-scrim);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ps-ui .sv-modal {
  max-width: 540px; padding: 24px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--ps-surface); color: var(--ps-tx);
  border: 1px solid var(--ps-bd); border-radius: var(--ps-r-xl);
  box-shadow: var(--ps-sh-pop);
  animation: psh-rise 200ms var(--ps-ease);
}
.ps-ui .sv-head { margin: 0 40px 20px 0; text-align: left; }
.ps-ui .sv-badge {
  display: inline-flex; align-items: center; margin-bottom: 10px; padding: 3px 8px;
  border-radius: var(--ps-r-sm); background: var(--ps-kin-soft); color: var(--ps-kin-hi);
  font-size: var(--ps-fs-xs); font-weight: 800;
}
.ps-ui .sv-head h2 {
  margin: 0 0 6px; font-size: var(--ps-fs-2xl); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.3; color: var(--ps-tx);
}
.ps-ui .sv-head p { font-size: var(--ps-fs-md); line-height: 1.55; color: var(--ps-tx-2); }
.ps-ui .sv-head p b { color: var(--ps-tx); }
.ps-ui .sv-q { margin-bottom: 18px; }
.ps-ui .sv-q > label,
.ps-ui .sv-q-label { margin-bottom: 8px; font-size: var(--ps-fs-md); font-weight: 700; line-height: 1.45; color: var(--ps-tx); }
.ps-ui .sv-req { color: var(--ps-danger-tx); }
.ps-ui .sv-opts { gap: 8px; }
.ps-ui .sv-scale-row { gap: 6px; }
.ps-ui :is(.sv-opt, .sv-scale) {
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--ps-bd); border-radius: var(--ps-r);
  background: var(--ps-surface); color: var(--ps-tx); box-shadow: var(--ps-sh-1);
  font-size: var(--ps-fs-sm); font-weight: 700;
  transition: background-color var(--ps-t) var(--ps-ease), border-color var(--ps-t) var(--ps-ease), color var(--ps-t) var(--ps-ease);
}
.ps-ui .sv-scale { padding: 8px 0; font-variant-numeric: tabular-nums; }
.ps-ui :is(.sv-opt, .sv-scale):hover { border-color: var(--ps-tx-3); }
.ps-ui :is(.sv-opt, .sv-scale).on { background: var(--ps-kon); border-color: var(--ps-kon); color: var(--ps-kon-on); }
.ps-ui .sv-scale-lbl { margin-top: 6px; font-size: var(--ps-fs-xs); color: var(--ps-tx-3); }
.ps-ui .sv-text {
  min-height: 72px; padding: 10px 12px;
  border: 1px solid var(--ps-bd); border-radius: var(--ps-r);
  background: var(--ps-surface); color: var(--ps-tx); box-shadow: var(--ps-sh-1);
  font-size: 16px; line-height: 1.5;
  transition: border-color var(--ps-t) var(--ps-ease), box-shadow var(--ps-t) var(--ps-ease);
}
.ps-ui .sv-text:focus { outline: none; border-color: var(--ps-kon-3); box-shadow: var(--psh-ring); }
.ps-ui .sv-err { font-size: var(--ps-fs-sm); font-weight: 700; color: var(--ps-danger-tx); }
.ps-ui .sv-submit {
  min-height: 48px; padding: 12px 16px; margin-top: 6px;
  border: 1px solid var(--ps-kon); border-radius: var(--ps-r);
  background: var(--ps-kon); color: var(--ps-kon-on);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), var(--ps-sh-1);
  font-size: var(--ps-fs-lg); font-weight: 800;
  transition: background-color var(--ps-t) var(--ps-ease), opacity var(--ps-t) var(--ps-ease);
}
.ps-ui .sv-submit:hover:not(:disabled) { background: var(--ps-kon-2); border-color: var(--ps-kon-2); }
.ps-ui .sv-submit:disabled { opacity: 0.45; }
.ps-ui .sv-done { padding: 12px 4px 4px; text-align: center; }
.ps-ui .sv-done-emoji { display: none; }
.ps-ui .sv-done h2 { margin: 0 0 6px; font-size: var(--ps-fs-2xl); font-weight: 800; letter-spacing: -0.015em; color: var(--ps-tx); }
.ps-ui .sv-done p { margin: 0 0 18px; font-size: var(--ps-fs-md); color: var(--ps-tx-2); }
.ps-ui .sv-done p b { color: var(--ps-tx); }
@media (max-width: 599px) {
  .ps-ui .sv-modal { padding: 20px 16px 18px; }
}


/* ── 9. Popup promo & Sensei (#promo-pop) ─────────────────────────
   Tanpa kilau, percikan, aura, dan gerak mengambang. Gambar sensei
   tetap tampil dalam panel Kon yang tenang. */
.ps-ui .promo-pop-backdrop { background: var(--psh-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ps-ui .promo-pop-modal {
  max-width: 380px; padding: 24px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--ps-surface); color: var(--ps-tx);
  border: 1px solid var(--ps-bd); border-radius: var(--ps-r-xl);
  box-shadow: var(--ps-sh-pop);
  animation: psh-rise 200ms var(--ps-ease);
}
.ps-ui .promo-pop-ico { display: none; }
.ps-ui .promo-pop-kicker {
  margin: 0 32px; font-size: var(--ps-fs-xs); font-weight: 800;
  letter-spacing: 0.06em; color: var(--ps-kin-hi);
}
.ps-ui .promo-pop-title {
  margin: 6px 0 8px; font-family: var(--ps-font); font-size: var(--ps-fs-2xl); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.3; color: var(--ps-tx); text-wrap: balance;
}
.ps-ui .promo-pop-title span { color: var(--ps-kin-hi); }
.ps-ui .promo-pop-sub { margin: 0 0 14px; font-size: var(--ps-fs-md); line-height: 1.55; color: var(--ps-tx-2); }
.ps-ui .promo-pop-sub b { color: var(--ps-tx); }
.ps-ui .promo-pop-until {
  margin-bottom: 16px; padding: 8px 12px;
  border: 1px solid var(--psh-kin-bd); border-radius: var(--ps-r);
  background: var(--ps-kin-tint); color: var(--ps-kin-hi);
  font-size: var(--ps-fs-sm); font-weight: 700;
}
.ps-ui .promo-pop-until b { color: var(--ps-tx); }
.ps-ui .promo-pop-cta {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px;
  border-radius: var(--ps-r); background: var(--ps-kon); color: var(--ps-kon-on);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), var(--ps-sh-1);
  font-size: var(--ps-fs-lg); font-weight: 800;
  transition: background-color var(--ps-t) var(--ps-ease);
}
.ps-ui .promo-pop-cta:hover { background: var(--ps-kon-2); }
.ps-ui .promo-pop-later {
  min-height: 44px; margin-top: 6px; border-radius: var(--ps-r);
  color: var(--ps-tx-2); font-size: var(--ps-fs-md); font-weight: 700;
  transition: background-color var(--ps-t) var(--ps-ease), color var(--ps-t) var(--ps-ease);
}
.ps-ui .promo-pop-later:hover { background: var(--ps-sunken); color: var(--ps-tx); }

.ps-ui .promo-pop-modal.sensei-pop { max-width: 400px; padding-top: 24px; overflow-x: hidden; }
.ps-ui .sensei-pop::before,
.ps-ui .sensei-pop::after,
.ps-ui .sensei-pop .promo-pop-cta::after { content: none; animation: none; }
.ps-ui .sensei-spark,
.ps-ui .sensei-halo { display: none; }
.ps-ui .sensei-hero {
  width: auto; height: 148px; margin: 0 0 16px; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
  border-radius: var(--ps-r-lg); background: var(--ps-kon);
}
.ps-ui .sensei-char { width: 150px; margin-top: 6px; filter: none; animation: none; }
.ps-ui .sensei-pop .promo-pop-kicker,
.ps-ui .sensei-pop .promo-pop-title span { color: var(--ps-kin-hi); }
.ps-ui .sensei-pop .promo-pop-kicker { margin: 0; }
.ps-ui .sensei-pop .promo-pop-title { font-size: var(--ps-fs-2xl); }
.ps-ui .sensei-slots { gap: 6px; margin: 12px 0 10px; flex-wrap: nowrap; }
.ps-ui .sensei-slot { width: 28px; height: 28px; font-size: var(--ps-fs-xs); font-weight: 800; }
/* tombol tutup di atas panel gambar Kon: warna terang */
.ps-ui .sensei-pop .promo-pop-x { top: 30px; right: 30px; color: var(--ps-kon-tx); }
.ps-ui .sensei-pop .promo-pop-x:hover { background: oklch(100% 0 0 / 0.08); color: var(--ps-kon-on); }
.ps-ui .sensei-pop:has(.sensei-hero[style*="none"]) .promo-pop-x { top: 10px; right: 10px; color: var(--ps-tx-3); }
.ps-ui .sensei-slot.filled { background: var(--ps-kon); color: var(--ps-kon-on); box-shadow: none; animation: none; }
.ps-ui .sensei-slot.filled img { background: var(--ps-kon); }
.ps-ui .sensei-slot.empty { background: var(--ps-surface); border: 1px dashed var(--ps-bd); color: var(--ps-tx-3); }
.ps-ui .sensei-urgency {
  margin: 4px 0 8px; padding: 8px 12px;
  border: 1px solid var(--psh-kin-bd); border-radius: var(--ps-r);
  background: var(--ps-kin-tint); color: var(--ps-kin-hi);
  font-size: var(--ps-fs-sm); font-weight: 700;
}
.ps-ui .sensei-urgency b { color: var(--ps-tx); }
.ps-ui .sensei-names { color: var(--ps-tx-3); }
.ps-ui .sensei-perks { margin: 12px 0 16px; }
.ps-ui .sensei-perks li { padding: 6px 4px 6px 28px; font-size: var(--ps-fs-md); line-height: 1.5; color: var(--ps-tx-2); }
.ps-ui .sensei-perks li::before {
  content: ""; left: 4px; top: 9px; width: 16px; height: 16px;
  background: var(--ps-kon-3);
  -webkit-mask: var(--psh-i-check) center / contain no-repeat; mask: var(--psh-i-check) center / contain no-repeat;
}
.ps-ui .sensei-pop .promo-pop-cta { overflow: visible; background: var(--ps-kon); }
.ps-ui .sensei-pop .promo-pop-cta:hover { background: var(--ps-kon-2); }
@media (max-width: 599px) {
  .ps-ui .promo-pop-modal,
  .ps-ui .promo-pop-modal.sensei-pop { padding: 20px 16px 16px; }
  .ps-ui .sensei-hero { height: 128px; }
  .ps-ui .sensei-char { width: 132px; }
  .ps-ui .sensei-slots { gap: 5px; }
  .ps-ui .sensei-slot { width: 26px; height: 26px; }
  .ps-ui .sensei-pop .promo-pop-x { top: 22px; right: 22px; }
}


/* ── 10. Popup testimoni (.tst-*, gaya disuntik student.js #testi-css;
       spesifisitas .ps-ui menang atas gaya suntikan) ─────────────── */
.ps-ui .tst-back { padding: 16px; background: var(--psh-scrim); animation: psh-fade 160ms var(--ps-ease); }
.ps-ui .tst-card {
  max-width: 440px; padding: 24px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: var(--ps-surface); color: var(--ps-tx);
  border: 1px solid var(--ps-bd); border-radius: var(--ps-r-xl);
  box-shadow: var(--ps-sh-pop); text-align: center;
  animation: psh-rise 200ms var(--ps-ease);
}
.ps-ui .tst-badge-img { width: 72px; height: 72px; margin: 0 auto 8px; filter: none; }
.ps-ui .tst-eyebrow { font-size: var(--ps-fs-xs); font-weight: 800; letter-spacing: 0.06em; color: var(--ps-kin-hi); }
.ps-ui .tst-h {
  margin: 6px 0 10px; font-family: var(--ps-font); font-size: var(--ps-fs-2xl); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.3; color: var(--ps-tx); text-wrap: balance;
}
.ps-ui .tst-reward {
  gap: 6px; margin-bottom: 14px; padding: 4px 10px;
  border: 0; border-radius: var(--ps-r-sm);
  background: var(--ps-kin-soft); color: var(--ps-kin-hi);
  font-size: var(--ps-fs-xs); font-weight: 800;
}
.ps-ui .tst-sub { margin-bottom: 14px; font-size: var(--ps-fs-md); line-height: 1.6; color: var(--ps-tx-2); }
.ps-ui .tst-sub b { color: var(--ps-tx); }
.ps-ui .tst-ta {
  min-height: 110px; padding: 10px 12px;
  border: 1px solid var(--ps-bd); border-radius: var(--ps-r);
  background: var(--ps-surface); color: var(--ps-tx); box-shadow: var(--ps-sh-1);
  font-size: 16px; line-height: 1.5; text-align: left;
  transition: border-color var(--ps-t) var(--ps-ease), box-shadow var(--ps-t) var(--ps-ease);
}
.ps-ui .tst-ta:focus { outline: none; border-color: var(--ps-kon-3); box-shadow: var(--psh-ring); }
.ps-ui .tst-btn {
  min-height: 48px; padding: 12px 16px; margin-top: 12px;
  border: 1px solid var(--ps-kon); border-radius: var(--ps-r);
  background: var(--ps-kon); color: var(--ps-kon-on);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.08), var(--ps-sh-1);
  font-size: var(--ps-fs-lg); font-weight: 800;
  transition: background-color var(--ps-t) var(--ps-ease), opacity var(--ps-t) var(--ps-ease);
}
.ps-ui .tst-btn:hover:not(:disabled) { background: var(--ps-kon-2); border-color: var(--ps-kon-2); }
.ps-ui .tst-btn:disabled { opacity: 0.45; }
/* konfirmasi keluar program: warna inline #b9455b → token bahaya */
.ps-ui .tst-btn[style*="background"] { background: var(--ps-danger) !important; border-color: var(--ps-danger); color: oklch(98.5% 0.01 25); }
.ps-ui .tst-later {
  min-height: 44px; margin-top: 6px; border-radius: var(--ps-r);
  color: var(--ps-tx-2); font-size: var(--ps-fs-md); font-weight: 700;
  transition: background-color var(--ps-t) var(--ps-ease), color var(--ps-t) var(--ps-ease);
}
.ps-ui .tst-later:hover { background: var(--ps-sunken); color: var(--ps-tx); }
.ps-ui .tst-optout { min-height: 36px; margin-top: 4px; font-size: var(--ps-fs-xs); color: var(--ps-danger-tx); text-underline-offset: 3px; }
.ps-ui .tst-err { margin-top: 8px; font-size: var(--ps-fs-sm); font-weight: 700; color: var(--ps-danger-tx); }
.ps-ui .tst-ok-emoji { display: none; }
.ps-ui .tst-ava { background: var(--ps-sunken); }
.ps-ui .tst-ava-ph { background: var(--ps-kin-soft); color: var(--ps-kin-hi); font-weight: 800; }
.ps-ui .tst-quote { font-family: var(--ps-font); font-size: var(--ps-fs-lg); line-height: 1.6; color: var(--ps-tx); }
.ps-ui .tst-name { color: var(--ps-tx); font-weight: 700; }
.ps-ui .tst-dot { background: var(--ps-bd); }
.ps-ui .tst-dot.on { background: var(--ps-kin); }
@media (max-width: 599px) {
  .ps-ui .tst-card { padding: 20px 16px 16px; }
}


/* ── 11. Popover detail badge (profil) ───────────────────────────── */
.ps-ui .s-badge-popover {
  padding: 14px 16px 12px;
  background: var(--ps-surface); border: 1px solid var(--ps-bd);
  border-radius: var(--ps-r-lg); box-shadow: var(--ps-sh-pop);
}
.ps-ui .s-badge-popover-arrow { border-color: var(--ps-bd); }
.ps-ui .s-badge-popover-close { width: 30px; height: 30px; top: 6px; right: 6px; border-radius: var(--ps-r-sm); color: var(--ps-tx-3); }
.ps-ui .s-badge-popover-close:hover { background: var(--ps-sunken); color: var(--ps-tx); }
@media (pointer: coarse) { .ps-ui .s-badge-popover-close { width: 40px; height: 40px; top: 2px; right: 2px; } }
/* kelangkaan: netral → sage → kon muda → kon → emas (makna urutan tetap) */
.ps-ui .s-badge-popover-rarity {
  margin-bottom: 8px; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  background: var(--ps-sunken); color: var(--ps-tx-2);
}
.ps-ui .s-badge-popover-rarity[data-rarity="common"]    { background: var(--ps-sunken); color: var(--ps-tx-2); }
.ps-ui .s-badge-popover-rarity[data-rarity="uncommon"]  { background: var(--ps-ok-soft); color: var(--ps-ok-tx); }
.ps-ui .s-badge-popover-rarity[data-rarity="rare"]      { background: oklch(95% 0.016 258); color: var(--ps-kon-3); }
.ps-ui .s-badge-popover-rarity[data-rarity="epic"]      { background: var(--ps-kon); color: var(--ps-kon-on); }
.ps-ui .s-badge-popover-rarity[data-rarity="legendary"] { background: var(--ps-kin); color: var(--ps-on-kin); }
.ps-ui .s-badge-popover-rarity[data-rarity="locked"]    { background: var(--ps-bd-2); color: var(--ps-tx-3); }
.ps-ui .s-badge-popover-name {
  margin: 0 0 6px; padding-right: 26px; font-family: var(--ps-font);
  font-size: var(--ps-fs-lg); font-weight: 800; line-height: 1.3; color: var(--ps-tx);
}
.ps-ui .s-badge-popover-desc { font-size: var(--ps-fs-sm); line-height: 1.55; color: var(--ps-tx-2); }
.ps-ui .s-badge-popover-meta {
  font-family: var(--ps-font); font-variant-numeric: tabular-nums; letter-spacing: 0;
  font-size: 11.5px; color: var(--ps-tx-3); border-top-color: var(--ps-bd-2);
}


/* ── 12. Toast selesai lesson & petunjuk jeda ──────────────────────
   Toast gelap Kon seperti .ps-toast; ikon emas untuk XP baru. Di desktop
   rata tengah area konten (di samping sidebar), di HP di atas tab bar. */
.ps-ui .s-completion-toast {
  left: calc(50% + var(--ps-side-w) / 2); bottom: 28px; z-index: 1210;
  gap: 12px; min-width: 260px; max-width: min(460px, calc(100vw - var(--ps-side-w) - 48px));
  padding: 12px 18px 12px 12px;
  background: var(--ps-kon); color: var(--ps-kon-on);
  border: 0; border-radius: var(--ps-r-lg); box-shadow: var(--ps-sh-pop);
  animation: psh-toast-in 200ms var(--ps-ease);
}
.ps-ui .ps-anon .s-completion-toast { left: 50%; max-width: calc(100vw - 32px); }
.ps-ui .s-completion-toast.is-leaving { animation: psh-toast-out 200ms var(--ps-ease) forwards; }
@keyframes psh-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes psh-toast-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 8px); } }
.ps-ui .s-ct-icon {
  width: 32px; height: 32px; font-size: 16px; font-weight: 800;
  background: var(--ps-kon-3); color: var(--ps-kon-on); box-shadow: none;
}
.ps-ui :is(.s-completion-first, .s-completion-replay) .s-ct-icon { background: var(--ps-kin); color: var(--ps-on-kin); box-shadow: none; }
.ps-ui :is(.s-completion-capped, .s-completion-done) .s-ct-icon { background: var(--ps-kon-3); color: var(--ps-kon-on); box-shadow: none; }
.ps-ui .s-ct-title { font-size: var(--ps-fs-lg); font-weight: 800; line-height: 1.3; color: var(--ps-kon-on); font-variant-numeric: tabular-nums; }
.ps-ui .s-completion-first .s-ct-title { color: var(--ps-kon-on); }
.ps-ui .s-ct-sub { font-size: var(--ps-fs-sm); line-height: 1.4; color: var(--ps-kon-tx); font-variant-numeric: tabular-nums; }
.ps-ui .s-completion-error { background: var(--ps-danger); border: 0; }
.ps-ui .s-completion-error .s-ct-icon { background: oklch(100% 0 0 / 0.18); color: oklch(99% 0.01 25); box-shadow: none; }
.ps-ui .s-completion-error .s-ct-sub { color: oklch(95% 0.025 25); }

.ps-ui .s-pause-hint {
  left: calc(50% + var(--ps-side-w) / 2);
  padding: 9px 16px; border-radius: 999px;
  background: var(--ps-kon); color: var(--ps-kon-on); box-shadow: var(--ps-sh-pop);
  font-size: var(--ps-fs-sm); font-weight: 700;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ps-ui .s-pause-hint.visible { animation: none; }

@media (max-width: 767px) {
  .ps-ui .s-completion-toast {
    left: 16px; right: 16px; bottom: calc(68px + 16px + env(safe-area-inset-bottom, 0px));
    min-width: 0; max-width: none; transform: none;
    animation-name: psh-toast-in-m;
  }
  .ps-ui .s-completion-toast.is-leaving { animation-name: psh-toast-out-m; }
  .ps-ui .s-pause-hint { left: 50%; bottom: calc(68px + 16px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes psh-toast-in-m { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes psh-toast-out-m { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }


/* ── 13. Banner status: pembayaran, jaringan, kuota, gerbang XP, Mayar ── */
.ps-ui .s-checkout-msg {
  margin: 14px 0; padding: 12px 14px;
  border: 1px solid; border-radius: var(--ps-r);
  font-size: var(--ps-fs-md); line-height: 1.55;
}
.ps-ui .s-checkout-msg strong { margin-bottom: 2px; font-size: var(--ps-fs-md); font-weight: 800; }
.ps-ui .s-checkout-msg a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ps-ui .s-checkout-success { background: var(--ps-ok-soft); border-color: oklch(86% 0.05 158); color: var(--ps-ok-tx); }
.ps-ui .s-checkout-pending { background: var(--s-warning-soft); border-color: var(--psh-warn-bd); color: var(--ps-warn-tx); }
.ps-ui .s-checkout-error { background: var(--ps-danger-soft); border-color: oklch(86% 0.05 25); color: var(--ps-danger-tx); }

.ps-ui .s-home-neterr {
  padding: 14px 16px; border-radius: var(--ps-r-lg);
  background: var(--s-warning-soft); border: 1px solid var(--psh-warn-bd);
  color: var(--ps-warn-tx); font-size: var(--ps-fs-md); line-height: 1.55;
}

.ps-ui .s-quota-banner {
  padding: 12px 16px; border-radius: var(--ps-r-lg);
  background: var(--ps-surface); border: 1px solid var(--ps-bd); box-shadow: var(--ps-sh-1);
  font-size: var(--ps-fs-sm); line-height: 1.6; color: var(--ps-tx-2);
}
.ps-ui .s-quota-banner b { font-weight: 700; color: var(--ps-tx); }
.ps-ui .s-quota-banner.is-capped { background: var(--s-warning-soft); border-color: var(--psh-warn-bd); box-shadow: none; color: var(--ps-warn-tx); }
.ps-ui .s-quota-banner.is-capped b { color: var(--s-warning-strong); }

.ps-ui .s-xpgate-banner {
  padding: 14px 16px; border-radius: var(--ps-r-lg);
  background: var(--ps-surface); border: 1px solid var(--ps-bd); box-shadow: var(--ps-sh-1);
}
.ps-ui .s-xpgate-head { font-size: var(--ps-fs-md); font-weight: 700; color: var(--ps-tx); }
.ps-ui .s-xpgate-head strong { font-weight: 800; color: var(--ps-kin-hi); }
.ps-ui .s-xpgate-sub { margin: 4px 0 10px; font-size: var(--ps-fs-sm); line-height: 1.5; color: var(--ps-tx-2); }
.ps-ui .s-xpgate-sub strong { color: var(--ps-tx); }
.ps-ui .s-xpgate-bar { height: 6px; border-radius: 3px; background: var(--ps-bd-2); }
.ps-ui .s-xpgate-fill { border-radius: inherit; background: var(--ps-kin); transition: width 400ms var(--ps-ease); }

/* banner kembali dari Mayar (gaya inline dari student.js → !important).
   Status dibaca dari nilai hue warna inline: 145 = berhasil, 25 = gagal. */
.ps-ui #s-mayar-return-banner {
  top: calc(var(--s-nav-h, 64px) + 12px) !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 16px !important;
  border-radius: var(--ps-r-lg);
  background: var(--ps-kon) !important; color: var(--ps-kon-on) !important;
  box-shadow: var(--ps-sh-pop) !important;
  font-size: var(--ps-fs-sm) !important; font-weight: 700; line-height: 1.45;
  letter-spacing: 0 !important; text-align: left !important;
  animation: psh-fade 160ms var(--ps-ease);
}
.ps-ui #s-mayar-return-banner.is-ok,
.ps-ui #s-mayar-return-banner[style*=" 145)"] { background: var(--ps-ok-tx) !important; }
.ps-ui #s-mayar-return-banner.is-err,
.ps-ui #s-mayar-return-banner[style*=" 25)"] { background: var(--ps-danger) !important; }
@media (min-width: 768px) {
  .ps-ui body:not(.ps-anon) > #s-mayar-return-banner {
    left: calc(50% + var(--ps-side-w) / 2) !important;
    max-width: calc(100vw - var(--ps-side-w) - 48px);
  }
}


/* ── 14. Layar batas/kunci yang ditulis student.js ke #main-content
      (_showPremiumLockedScreen, _showPlayCapScreen, _showDailyCapModal) ── */
.ps-ui .s-cap-screen {
  max-width: 560px; margin: 8px auto 24px; padding: 32px 28px 28px;
  background: var(--ps-surface); border: 1px solid var(--ps-bd);
  border-radius: var(--ps-r-lg); box-shadow: var(--ps-sh-1);
  text-align: center;
}
/* emoji 🔒/🔁/⏳ diganti ubin ikon kunci */
.ps-ui .s-cap-icon {
  width: 48px; height: 48px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: var(--ps-r-lg); background: var(--ps-sunken);
  box-shadow: inset 0 0 0 1px var(--ps-bd-2); color: var(--ps-tx-2);
  font-size: 0; line-height: 0;
}
.ps-ui .s-cap-icon::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--psh-i-lock) center / contain no-repeat; mask: var(--psh-i-lock) center / contain no-repeat;
}
.ps-ui .s-cap-title {
  margin: 0 0 8px; font-size: var(--ps-fs-3xl); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.25; color: var(--ps-tx); text-wrap: balance;
}
.ps-ui .s-cap-sub { margin: 0 auto 20px; max-width: 46ch; font-size: var(--ps-fs-md); line-height: 1.6; color: var(--ps-tx-2); }
.ps-ui .s-cap-sub strong { color: var(--ps-tx); }
.ps-ui .s-cap-options { margin: 0; }
.ps-ui .s-cap-divider { height: 1px; margin: 24px 0 18px; background: var(--ps-bd-2); }
.ps-ui .s-cap-screen h3 { text-align: left; font-weight: 800; color: var(--ps-tx); }
.ps-ui .s-cap-screen ul { list-style: disc; text-align: left; }
.ps-ui .s-cap-screen li::marker { color: var(--ps-tx-3); }
@media (max-width: 767px) {
  .ps-ui .s-cap-screen { margin: 0 auto 16px; padding: 24px 18px 20px; }
  .ps-ui .s-cap-title { font-size: var(--ps-fs-2xl); }
}


/* ── 15. Pill & badge ────────────────────────────────────────────── */
.ps-ui .s-user-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-transform: none; vertical-align: middle;
}
/* Admin = Kon (dulu emas dengan teks putih: kontras gagal) */
.ps-ui .s-badge-admin { background: var(--ps-kon); color: var(--ps-kon-on); }
.ps-ui .s-badge-pro { background: var(--ps-ok-soft); color: var(--ps-ok-tx); }
.ps-ui .s-badge-premium { background: var(--ps-kin-soft); color: var(--ps-kin-hi); box-shadow: none; }

/* "Baru": emas penuh, sama dengan .ps-new di navigasi */
.ps-ui .s-new-pill {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: 8px;
  border-radius: 999px; background: var(--ps-kin); color: var(--ps-on-kin); box-shadow: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: none; vertical-align: 1px;
}
.ps-ui .s-live-dot { width: 7px; height: 7px; background: var(--ps-kin); box-shadow: none; animation: none; }
/* terjadwal (drip): gaya .ps-st-sched */
.ps-ui .s-drip-pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-left: 6px;
  border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--ps-bd);
  color: var(--ps-tx-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0; vertical-align: 1px; white-space: nowrap;
}
/* label paket di /upgrade */
.ps-ui .s-plan-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 999px; background: var(--ps-sunken); color: var(--ps-tx-2);
  box-shadow: inset 0 0 0 1px var(--ps-bd);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; white-space: nowrap;
}
.ps-ui .s-plan-badge-recommend { background: var(--ps-kin); color: var(--ps-on-kin); box-shadow: none; }
.ps-ui .s-plan-badge-free { background: var(--ps-sunken); color: var(--ps-tx-2); }


/* ── 16. Progres ─────────────────────────────────────────────────── */
.ps-ui .s-progress-bar,
.ps-ui .s-xp-progress { height: 6px; border-radius: 3px; background: var(--ps-bd-2); overflow: hidden; }
.ps-ui .s-progress-fill,
.ps-ui .s-xp-progress-fill { border-radius: inherit; background: var(--ps-kin); transition: width 400ms var(--ps-ease); }
.ps-ui .s-progress-text { font-size: var(--ps-fs-xs); color: var(--ps-tx-3); font-variant-numeric: tabular-nums; }


/* ── 17. Skeleton: satu gaya shimmer Presisi ────────────────────── */
.ps-ui :is(.s-skel-thumb, .s-skel-line, .s-skel-avatar, .s-pillar-skel, .s-profile-stat-skel) {
  background: linear-gradient(90deg, var(--ps-bd-2) 25%, var(--ps-sunken) 37%, var(--ps-bd-2) 63%);
  background-size: 400% 100%;
  animation: ps-shimmer 1.4s ease infinite;
}
.ps-ui .s-skel-line { height: 10px; border-radius: var(--ps-r-sm); }
.ps-ui .s-skel-line--lg { height: 16px; }
.ps-ui .s-skel-thumb,
.ps-ui .s-pillar-skel,
.ps-ui .s-profile-stat-skel { border-radius: var(--ps-r-lg); }
.ps-ui .s-hero-continue-skeleton {
  background: var(--ps-surface); border: 1px solid var(--ps-bd);
  border-radius: var(--ps-r-lg); box-shadow: var(--ps-sh-1);
}


/* ── 18. Avatar & cincin tingkat (bezel) ─────────────────────────────
   Urutan tingkat tetap terbaca: abu muda → abu kebiruan → kon → emas.
   Tanpa busur berputar dan denyut cahaya. */
.ps-ui .s-lb-avatar { font-weight: 800; }
.ps-ui .s-bezel { padding: 3px; box-shadow: none; }
.ps-ui .s-bezel--pemula    { --s-bezel-color: oklch(88% 0.012 258); }
.ps-ui .s-bezel--tekun     { --s-bezel-color: oklch(76% 0.035 258); }
.ps-ui .s-bezel--petualang { --s-bezel-color: oklch(58% 0.06 258); }
.ps-ui .s-bezel--mahir     { --s-bezel-color: var(--ps-kon-3); }
.ps-ui .s-bezel--senpai    { --s-bezel-color: oklch(84% 0.08 84); }
.ps-ui .s-bezel--sensei    { --s-bezel-color: var(--ps-kin); }
.ps-ui .s-bezel--tatsujin  { --s-bezel-color: oklch(58% 0.11 70); }
/* member berbayar = cincin emas, admin = cincin Kon (peran menimpa warna tingkat) */
.ps-ui .s-bezel--premium,
.ps-ui .s-bezel--admin { padding: 3px; animation: none; }
.ps-ui .s-bezel--premium { background: var(--ps-kin); box-shadow: 0 0 0 1px oklch(68% 0.11 76); }
.ps-ui .s-bezel--admin { background: var(--ps-kon); box-shadow: 0 0 0 1px var(--ps-kon-3); }
.ps-ui .s-bezel--premium::before,
.ps-ui .s-bezel--admin::before { content: none; animation: none; }


/* ── 19. Keadaan kosong & galat umum ─────────────────────────────── */
.ps-ui :is(.s-hero-continue-empty, .s-pillar-empty, .s-track-empty, .s-profile-error) {
  padding: 18px 20px; border-radius: var(--ps-r-lg);
  background: var(--ps-sunken); border: 1px dashed var(--ps-bd);
  color: var(--ps-tx-2); font-size: var(--ps-fs-md); line-height: 1.55; text-align: left;
}
.ps-ui :is(.s-hero-continue-empty, .s-pillar-empty, .s-track-empty, .s-profile-error) a { color: var(--ps-kin-hi); font-weight: 700; }
.ps-ui .s-stat-loading { font-size: var(--ps-fs-sm); color: var(--ps-tx-3); }