:root { --kj-biru: #1b4f8a; --kj-biru-gelap: #143a66; }
body { background: #f4f6f9; font-size: .95rem; }
.navbar-kj { background: var(--kj-biru); }
.navbar-kj .nav-link { color: rgba(255,255,255,.85); }
.navbar-kj .nav-link:hover, .navbar-kj .nav-link.active { color: #fff; }
.navbar-kj .nav-link.active { border-bottom: 2px solid #ffc107; }
.dropdown-menu { font-size: .92rem; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { background: #fff; font-weight: 600; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table-hover tbody tr:hover { background: #f1f6fc; }
.label-wajib::after { content: " *"; color: #dc3545; }
.bg-orange { background-color: #fd7e14 !important; color: #fff !important; }
.text-orange { color: #fd7e14 !important; }
.kartu-angka { border-left: 4px solid var(--kj-biru); }
.kartu-angka .angka { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kartu-angka.hijau { border-left-color: #198754; }
.kartu-angka.kuning { border-left-color: #ffc107; }
.kartu-angka.merah { border-left-color: #dc3545; }
.kartu-angka.abu { border-left-color: #6c757d; }
.timeline { list-style: none; padding-left: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: #dee2e6; }
.timeline li { position: relative; padding: 0 0 14px 32px; }
.timeline li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--kj-biru); border: 2px solid #fff; box-shadow: 0 0 0 1px #adb5bd; }
.timeline li:first-child::before { background: #198754; }
.judul-halaman { font-size: 1.35rem; font-weight: 600; }
.ts-wrapper.multi .ts-control > div { background: #e7f0fb; color: #143a66; border-radius: 4px; }
.pre-wrap { white-space: pre-wrap; }
.tabel-gulir { overflow-x: auto; }
.badge-lonceng { position: absolute; top: 2px; right: 0; font-size: .62rem; }
.baris-error { background: #fff3f3; }
.baris-duplikat { background: #fff9e6; }
.json-diff { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; max-height: 220px; overflow: auto; background: #f8f9fa; padding: .5rem; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 767.98px) { body { font-size: .92rem; } .judul-halaman { font-size: 1.15rem; } .kartu-angka .angka { font-size: 1.5rem; } }
@media print { .navbar, .no-print, .btn { display: none !important; } body { background: #fff; } .card { box-shadow: none; border: 1px solid #ccc; } }

/* ===== Tampilan gaya SIM Akademik ===== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/poppins/poppins-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/poppins/poppins-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/poppins/poppins-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/poppins/poppins-latin-700-normal.woff2') format('woff2')}

body.kj-body { font-family: 'Poppins', system-ui, 'Segoe UI', Roboto, sans-serif; background: #f4f6fa; color: #2b3445; font-size: .92rem; }
.kj-body h1, .kj-body h2, .kj-body h3, .kj-body .h5 { font-family: 'Poppins', system-ui, sans-serif; }
.kj-header { position: relative; z-index: 1030; }
.kj-topbar { background: #0a66c2; display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; color: #fff; }
.kj-banner { background: #0d4585 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4 52 28 28 52 4 28Z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='2'/%3E%3Ccircle cx='28' cy='28' r='5' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E"); color: #fff; padding: .7rem 0; }
@media (min-width: 992px) { .kj-banner { padding: 1.15rem 0; } }
.kj-logo { width: 86px; height: 86px; background: #fff; border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.kj-logo img { width: 66px; height: 66px; object-fit: contain; }
.kj-logo-sm { width: 58px; height: 58px; border-radius: 14px; }
.kj-logo-sm img { width: 44px; height: 44px; }
.kj-brand-sub { font-size: .95rem; color: #fff; line-height: 1.3; }
.kj-brand-title { font-size: 1.65rem; font-weight: 600; color: #fff; line-height: 1.2; }
.kj-topbar .kj-brand-sub { font-size: .85rem; }
.kj-topbar .kj-brand-title { font-size: 1.12rem; }
.kj-hamburger { width: 54px; height: 46px; border: 0; border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.kj-hamburger:hover { background: rgba(255,255,255,.2); }
.kj-tool { color: #fff; text-decoration: none; font-size: 1.05rem; display: inline-flex; align-items: center; padding: .4rem .5rem; }
.kj-tool:hover { color: #ffd; }
.kj-flag { display: inline-block; width: 22px; height: 15px; border-radius: 2px; background: linear-gradient(#e11d2f 50%, #fff 50%); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.kj-user { display: flex; align-items: center; gap: .6rem; color: #fff; }
.kj-user:hover { color: #fff; }
.kj-user-ikon { font-size: 1.45rem; }
.kj-user-nama { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.kj-user-peran { font-size: .78rem; opacity: .92; line-height: 1.25; }
.kj-nav { background: #fff; border-bottom: 1px solid #e3e8ef; box-shadow: 0 1px 2px rgba(15,40,80,.05); }
.kj-nav .nav-link { color: #2b3445; font-weight: 500; padding: .7rem 1.05rem; margin: .4rem .12rem; border-radius: 6px; }
.kj-nav .nav-link:hover { background: #eef3fb; }
.kj-nav .nav-link.is-active, .kj-nav .nav-link.show { background: #0b4a8f; color: #fff; }
.kj-menu { border: 0; border-radius: 10px; box-shadow: 0 8px 28px rgba(15,40,80,.18); padding: .55rem; min-width: 240px; font-size: .92rem; }
.kj-menu .dropdown-item { padding: .6rem .8rem; border-radius: 6px; color: #2b3445; }
.kj-menu .dropdown-item:hover, .kj-menu .dropdown-item:focus, .kj-menu .dropdown-item.is-active { background: #0b4a8f; color: #fff; }
.kj-nav .dropdown-menu { margin-top: -.15rem !important; }
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: -.55rem; left: 100%; margin-left: .35rem; }
@media (min-width: 992px) { .dropdown-submenu:hover > .dropdown-menu { display: block; } }
.kj-menu .dropdown-submenu > .dropdown-menu.show { display: block; }
.kj-sidebar { background: #404040; color: #fff; width: 290px; }
.kj-side-judul { font-size: .75rem; letter-spacing: .1em; color: #a5abb3; font-weight: 600; }
.kj-side, .kj-side-sub { list-style: none; margin: 0; padding: 0; }
.kj-side > li { border-top: 1px solid rgba(255,255,255,.07); }
.kj-side-link { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; color: #fff; text-decoration: none; }
.kj-side-link:hover { background: #4b4b4b; color: #fff; }
.kj-side-link.is-active { background: #2f2f2f; }
.kj-side-sub .kj-side-link { padding-left: 1.7rem; font-size: .9rem; }
.kj-side-sub .kj-side-sub .kj-side-link { padding-left: 2.6rem; }
.kj-chev { font-size: .72rem; transition: transform .2s; }
.kj-side-link[aria-expanded="true"] .kj-chev { transform: rotate(180deg); }
.kj-bullet { width: 1rem; opacity: .85; }
.kj-footer { text-align: center; color: #8a94a6; font-size: .8rem; padding: 1.2rem 0 1.5rem; }
.kj-crumb { background: #eceff3; border-radius: 4px; padding: .5rem .85rem; font-size: .85rem; display: inline-flex; gap: .5rem; align-items: center; width: 100%; }
.kj-title { font-size: 1.8rem; font-weight: 500; }
.kj-filter { border: 0; border-top: 3px solid #f5a623; border-radius: 6px; background: #fff; }
.kj-filter label { color: #f0a020; font-weight: 600; }
.kj-body .card { border-radius: 12px; }
.kj-body .card-header { border-radius: 12px 12px 0 0; }
.kj-kartu { position: relative; overflow: hidden; border-radius: 14px; color: #fff; padding: 1.05rem 1.2rem; min-height: 150px; box-shadow: 0 6px 16px rgba(20,40,90,.16); transition: transform .15s, box-shadow .15s; }
.kj-kartu:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,40,90,.22); }
.kj-kartu-judul { font-weight: 500; font-size: .95rem; position: relative; z-index: 1; }
.kj-kartu-angka { font-size: 2.4rem; font-weight: 700; line-height: 1.15; margin: .25rem 0; position: relative; z-index: 1; }
.kj-kartu-sub { font-size: .8rem; font-weight: 500; opacity: .96; position: relative; z-index: 1; }
.kj-kartu-ikon { position: absolute; right: -8px; bottom: -16px; font-size: 5.8rem; opacity: .2; line-height: 1; }
.kj-biru { background: linear-gradient(135deg, #4f7de8, #3cc3e0); }
.kj-hijau { background: linear-gradient(135deg, #12a07a, #2fd48a); }
.kj-oranye { background: linear-gradient(135deg, #f7931e, #fbb83b); }
.kj-merah { background: linear-gradient(135deg, #c2306a, #ee4b4b); }
.kj-ungu { background: linear-gradient(135deg, #7b4fe0, #b66cf2); }
.kj-teal { background: linear-gradient(135deg, #0e8aa5, #3ec6d6); }
.kj-login { border: 0; border-top: 4px solid #0b4a8f; box-shadow: 0 6px 20px rgba(20,40,90,.12); }
.kj-login-ikon { width: 46px; height: 46px; border-radius: 12px; background: #e8f0fb; color: #0b4a8f; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
@media (max-width: 575.98px) { .kj-kartu { padding: .9rem 1rem; min-height: 138px; } .kj-kartu-angka { font-size: 2rem; } .kj-title { font-size: 1.4rem; } }

.kj-chart { position: relative; height: 270px; }

/* ===== Dialog konfirmasi kustom & penanda galat ===== */
.kj-dialog .modal-content { border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 40, 80, .28); }
.kj-dialog-ikon { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; }
.kj-dialog.is-bahaya .kj-dialog-ikon { background: #fdecec; color: #dc3545; }
.kj-dialog.is-peringatan .kj-dialog-ikon { background: #fff4e0; color: #f0a020; }
.kj-dialog.is-info .kj-dialog-ikon { background: #e8f0fb; color: #0b4a8f; }
.kj-dialog .modal-body .pre-wrap { color: #5b6577 !important; }
.kj-login, [data-scroll-ke], .is-invalid, [data-scroll-galat] { scroll-margin-top: 1rem; }
@keyframes kjSorot { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); } 70% { box-shadow: 0 0 0 .6rem rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }
.kj-sorot { animation: kjSorot 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .kj-sorot { animation: none; } }

/* Editor teks sederhana */
.kj-editor { border: 1px solid #ced4da; border-radius: 8px; overflow: hidden; background: #fff; }
.kj-editor.is-invalid { border-color: #dc3545; }
.kj-editor-bar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; background: #f4f6fa; border-bottom: 1px solid #e3e8ef; }
.kj-editor-isi { border: 0; border-radius: 0; box-shadow: none !important; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.kj-editor-lihat { padding: 1rem; min-height: 200px; background: #fff; }