/* ==========================================================================
   PASKAL+ V2 — Pratinjau RPP format modul (js/36-v2-rpp-format.js)
   ========================================================================== */
.rppx {
  --rx-tua: #1a3a8c; --rx-tengah: #2458e6; --rx-muda: #eaf0fd; --rx-garis: #c8d4ec; --rx-aksen: #f0b429; --rx-aksen-muda: #fff6de;
  max-height: 66vh; overflow: auto; padding-right: 6px; text-align: left; color: #22262a; font-size: 13.5px; line-height: 1.6;
}
.rppx p { margin: 0 0 8px; text-align: justify; }
.rppx ol, .rppx ul { margin: 0 0 10px; padding-left: 22px; }
.rppx li { margin-bottom: 4px; }
.rppx ol ol { margin-top: 4px; }
.rppx h4 { margin: 12px 0 6px; font-size: 13.5px; font-weight: 800; color: var(--rx-tua); }
.rppx h5 { margin: 12px 0 6px; padding-left: 8px; border-left: 4px solid var(--rx-aksen); font-size: 13.5px; font-weight: 800; color: var(--rx-tua); }
.rppx-sampul { border-radius: 16px; padding: 22px 24px; margin-bottom: 16px; color: #fff; background: linear-gradient(140deg, #0d2560, #1a3a8c 60%, #2458e6); }
.rppx-sampul small { display: inline-block; padding: 3px 12px; border-radius: 99px; background: var(--rx-aksen); color: #3c2800; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rppx-sampul h2 { margin: 12px 0 2px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.rppx-sampul p { margin: 0; color: #d7e2ff; text-align: left; }
.rppx-sampul h1 { margin: 10px 0 12px; font-size: 26px; font-weight: 800; line-height: 1.15; color: #ffd65a; }
.rppx-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.rppx-chip span { padding: 3px 12px; border-radius: 99px; background: #ffffff26; font-size: 12px; font-weight: 700; }
.rppx-sekolah { margin-top: 12px !important; font-weight: 800; color: #fff !important; }
.rppx-id, .rppx-t { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 12.8px; }
.rppx-id th, .rppx-id td, .rppx-t th, .rppx-t td { border: 1px solid var(--rx-garis); padding: 7px 10px; vertical-align: top; text-align: left; }
.rppx-id th { width: 34%; background: var(--rx-muda); color: var(--rx-tua); font-weight: 800; }
.rppx-t thead th { background: var(--rx-tua); color: #fff; font-weight: 800; text-align: center; }
.rppx-t tbody tr:nth-child(even) td { background: #f6f9fe; }
.rppx-alur td, .rppx-alur th { font-size: 12px; }
.rppx-gulir { overflow-x: auto; }
.rppx-h { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; padding: 7px 12px; border-radius: 10px; background: var(--rx-muda); color: var(--rx-tua); font-size: 16px; font-weight: 800; }
.rppx-h span { width: 20px; height: 20px; border-radius: 50%; background: var(--rx-tua); box-shadow: inset 0 0 0 5px var(--rx-tua), inset 0 0 0 7px #fff; flex: none; }
.rppx-ket { font-size: 12px; color: #606a65; }
.rppx-kosong { color: #8a948f; }
.rppx-p { margin: 18px 0; padding-top: 4px; }
.rppx-p > header { display: grid; grid-template-columns: 120px 1fr; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.rppx-p > header > span { display: grid; place-items: center; padding: 10px; background: var(--rx-tua); color: #fff; font-weight: 800; }
.rppx-p > header > div { padding: 8px 12px; background: var(--rx-muda); color: var(--rx-tua); }
.rppx-p > header b { display: block; font-size: 15px; }
.rppx-p > header small { display: block; font-size: 12px; font-weight: 600; }
.rppx-pb { font-weight: 700; color: var(--rx-tengah); }
.rppx-kotak { margin: 8px 0; padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.rppx-kotak b { margin-right: 6px; }
.k-biru { background: #e8f1fd; } .k-biru b { color: #1e408c; }
.k-abu { background: #f3f5f4; } .k-abu b { color: #606a65; }
.k-hijau { background: var(--rx-muda); } .k-hijau b { color: var(--rx-tua); }
.k-kuning { background: var(--rx-aksen-muda); } .k-kuning b { color: #7c4e08; }
.k-ungu { background: #f1ecfe; } .k-ungu b { color: #5828a0; }
.rppx-prinsip { display: block; width: fit-content; margin: 5px 0 2px 10px; padding: 2px 10px; border-radius: 6px; background: var(--rx-aksen-muda); color: #7c4e08; font-size: 12px; }
.rppx-ttd { width: 100%; margin-top: 26px; font-size: 13px; }
.rppx-ttd td { width: 50%; text-align: center; vertical-align: top; }
.rppx-ttd .sp { height: 60px; }
@media (max-width: 640px) { .rppx-p > header { grid-template-columns: 1fr; } .rppx-id th { width: 42%; } }