/* ==========================================================================
   GAYA TAMPILAN PANEL ADMIN  (Pengaturan Situs > Gaya Tampilan Panel Admin)

   Dua gaya, dipilih global lewat <html data-gaya="modern|pixel">. Mode
   terang/gelap (data-tema) tetap terpisah dan berlaku di KEDUA gaya.

   Cara kerjanya: file ini dimuat PALING AKHIR, lalu menimpa token warna
   (--permukaan, --garis, --ink-*, ...) yang sudah dipakai seluruh admin.css,
   plus beberapa aturan struktur (sudut, bayangan, huruf). Karena hampir semua
   komponen sudah memakai token, gaya baru tak perlu menyentuh 50+ templat.
   Hapus file ini = tampilan kembali persis seperti sebelumnya.
   ========================================================================== */

/* ---------- huruf lokal (tanpa CDN, sama seperti huruf lain di situs ini) ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(vendor/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/press-start-2p-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/fonts/vt323-latin-400-normal.woff2) format('woff2');
}

/* ==========================================================================
   KARTU PILIHAN GAYA DI HALAMAN PENGATURAN (netral terhadap gaya aktif)
   ========================================================================== */
.tema-kartu {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 12px; cursor: pointer;
  border: 2px solid var(--garis); border-radius: 12px; background: var(--permukaan);
  transition: border-color 150ms ease, transform 150ms var(--ease-out);
}
.tema-kartu input { position: absolute; opacity: 0; pointer-events: none; }
.tema-kartu b { font-size: 14px; color: var(--ink-900); }
.tema-kartu small { font-size: 12px; color: var(--ink-600); line-height: 1.45; }
.tema-kartu:active { transform: scale(0.98); }
.tema-kartu:has(input:checked) { border-color: var(--adm-aksi-teks); box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-aksi-teks) 22%, transparent); }
.tema-kartu:has(input:focus-visible) { outline: 2px solid var(--adm-aksi-teks); outline-offset: 2px; }
.tema-pratinjau { display: flex; gap: 8px; align-items: flex-end; height: 74px; padding: 10px; margin-bottom: 4px; }
.tema-pratinjau i { display: block; flex: 1; }
.tema-modern { background: linear-gradient(135deg, #eef2fb, #f8f9fd); border-radius: 12px; }
.tema-modern i { border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .25); }
.tema-modern i:nth-child(1) { height: 70%; border-top: 4px solid #4f7cff; }
.tema-modern i:nth-child(2) { height: 100%; border-top: 4px solid #1f9d7a; }
.tema-modern i:nth-child(3) { height: 52%; border-top: 4px solid #f0a020; }
.tema-pixel { background: #efe6cf; border: 3px solid #2b2140; border-radius: 0;
  background-image: radial-gradient(rgba(43, 33, 64, .18) 1px, transparent 1px); background-size: 8px 8px; }
.tema-pixel i { background: #fffbea; border: 3px solid #2b2140; box-shadow: 3px 3px 0 #2b2140; }
.tema-pixel i:nth-child(1) { height: 70%; background: #ffd23f; }
.tema-pixel i:nth-child(2) { height: 100%; background: #6ee7a0; }
.tema-pixel i:nth-child(3) { height: 52%; background: #8ec5ff; }
@media (hover: hover) and (pointer: fine) { .tema-kartu:hover { border-color: var(--adm-aksi-teks); } }

/* ==========================================================================
   GAYA MODERN
   Mengapa: tampilan lama sudah rapi tapi datar -- semua kartu sama tinggi,
   sama putih, garisnya sama tipis, jadi mata tak tahu harus mulai dari mana.
   Modern menambah HIERARKI: angka kunci besar dan tebal, kartu mengambang
   lembut, sidebar bergradasi sebagai jangkar, dan satu huruf (Plus Jakarta
   Sans) yang lebih ramah dan lebih berkarakter daripada Inter polos.
   ========================================================================== */
html[data-gaya="modern"] body.admin-body {
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --latar: #eef2f9; --cream-100: #eef2f9;
  --permukaan: #ffffff; --cream-50: #ffffff;
  --permukaan-2: #f5f7fc; --cream-200: #f5f7fc;
  --garis: #e3e8f2; --line-200: #e3e8f2; --garis-halus: #edf0f7;
  --ink-900: #0b1220; --ink-700: #2b3850; --ink-600: #566782;
  --bayang-kartu: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -10px rgba(16, 24, 40, .12);
  --bayang-panel: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -12px rgba(16, 24, 40, .10);
  --baris-hover: rgba(79, 124, 255, .06);
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(79, 124, 255, .10), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(31, 157, 122, .08), transparent 55%),
    var(--latar);
  background-attachment: fixed;
  letter-spacing: -0.003em;
}
html[data-gaya="modern"][data-tema="gelap"] body.admin-body {
  --latar: #0a0f1e; --cream-100: #0a0f1e;
  --permukaan: #121a2e; --cream-50: #121a2e;
  --permukaan-2: #18223a; --cream-200: #18223a;
  --garis: #25314d; --line-200: #25314d; --garis-halus: #1d2840;
  --bayang-kartu: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 36px -10px rgba(0, 0, 0, .55);
  --bayang-panel: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .5);
  --baris-hover: rgba(120, 160, 255, .09);
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(79, 124, 255, .14), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(31, 157, 122, .10), transparent 55%),
    var(--latar);
  background-attachment: fixed;
}
html[data-gaya="modern"] .admin-main { background: transparent; }

/* sidebar: gradasi + menu berupa pil */
html[data-gaya="modern"] .admin-sidebar {
  background: linear-gradient(180deg, var(--teal-950) 0%, color-mix(in srgb, var(--teal-950) 70%, #000) 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
html[data-gaya="modern"] .admin-sidebar-brand { border-bottom-color: rgba(255, 255, 255, .10); }
html[data-gaya="modern"] .admin-sidebar-brand .name { font-weight: 800; letter-spacing: -0.01em; }
html[data-gaya="modern"] .admin-nav-link {
  margin: 1px 12px; padding: 9px 14px; border-radius: 12px; border-left: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--ease-out);
}
html[data-gaya="modern"] .admin-nav-link.active {
  border-radius: 12px; margin-right: 12px;
  background: linear-gradient(135deg, var(--clay-500), color-mix(in srgb, var(--clay-500) 78%, #fff));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--clay-500) 80%, transparent);
}
html[data-gaya="modern"] .admin-nav-label { padding-left: 26px; letter-spacing: .14em; }

/* bar atas: kaca buram */
html[data-gaya="modern"] .admin-topbar {
  background: color-mix(in srgb, var(--latar) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  box-shadow: none; border-bottom: 1px solid var(--garis);
}
html[data-gaya="modern"] .admin-topbar h1 { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }

/* kartu & panel */
html[data-gaya="modern"] .panel,
html[data-gaya="modern"] .statcard,
html[data-gaya="modern"] .ministat-row,
html[data-gaya="modern"] .admin-card {
  border-radius: 20px; border: 1px solid var(--garis); box-shadow: var(--bayang-kartu);
}
html[data-gaya="modern"] .panel-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
html[data-gaya="modern"] .statcard { position: relative; overflow: hidden; padding: 20px 22px; }
html[data-gaya="modern"] .statcard::after {   /* sapuan warna halus di pojok, mengikuti jenis kartu */
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--adm-blue) 14%, transparent), transparent 70%);
  pointer-events: none;
}
html[data-gaya="modern"] .statcard .ic { border-radius: 16px; width: 54px; height: 54px; }
html[data-gaya="modern"] .statcard .val { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
html[data-gaya="modern"] .statcard .lab { letter-spacing: .08em; }
@media (hover: hover) and (pointer: fine) {
  html[data-gaya="modern"] .statcard, html[data-gaya="modern"] .qa { transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 150ms ease, border-color 150ms ease; }
  html[data-gaya="modern"] .statcard:hover { transform: translateY(-2px); }
  html[data-gaya="modern"] .qa:hover { transform: translateY(-2px); }
}
html[data-gaya="modern"] .qa { border-radius: 16px; }
html[data-gaya="modern"] .qa .qa-ic, html[data-gaya="modern"] .ann-item .ann-ic, html[data-gaya="modern"] .ministat .mi-ic { border-radius: 14px; }

/* tombol, input, tab, badge */
html[data-gaya="modern"] .admin-main .btn,
html[data-gaya="modern"] .btn-dark-solid, html[data-gaya="modern"] .btn-indigo { border-radius: 12px; font-weight: 700; }
html[data-gaya="modern"] .admin-main .btn-primary { box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--clay-500) 85%, transparent); }
html[data-gaya="modern"] .admin-main .btn-primary:active { box-shadow: none; }
html[data-gaya="modern"] .admin-main input.form-control,
html[data-gaya="modern"] .admin-main select.form-select,
html[data-gaya="modern"] .admin-main textarea.form-control,
html[data-gaya="modern"] .admin-main .ts-control { border-radius: 12px; }
html[data-gaya="modern"] .tabpills a, html[data-gaya="modern"] .dash-tab { border-radius: 999px; }
html[data-gaya="modern"] .admin-main .table thead th { letter-spacing: .06em; }
html[data-gaya="modern"] .admin-main .table tbody tr td:first-child { border-top-left-radius: 0; }
html[data-gaya="modern"] .admin-user .avatar { box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-indigo) 25%, transparent); }

/* ==========================================================================
   GAYA PIXEL 2D
   Mengapa: untuk pengurus yang bosan dengan dashboard "kantoran". Rasa
   game retro dibangun dari TIGA hal saja, bukan dari hiasan berlebihan:
     1) huruf pixel hanya untuk judul, angka, dan label (pendek, besar);
        tabel dan formulir tetap Inter supaya data keuangan terbaca jelas;
     2) sudut siku + garis tebal 3px + bayangan keras (tanpa blur) --
        kartu terasa seperti petak game, dan tombol "ditekan" turun 2px;
     3) palet terbatas: perkamen krem, ungu tua, kuning koin.
   Gerak memakai steps() supaya terasa patah-patah ala animasi sprite, dan
   tetap tunduk pada prefers-reduced-motion (admin.css).
   ========================================================================== */
html[data-gaya="pixel"] body.admin-body {
  --font-display: 'Press Start 2P', ui-monospace, monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-pixel2: 'VT323', ui-monospace, monospace;
  --px: #2b2140;                               /* "tinta": garis, bayangan, teks utama */
  --latar: #efe6cf; --cream-100: #efe6cf;
  --permukaan: #fffbea; --cream-50: #fffbea;
  --permukaan-2: #f6edcc; --cream-200: #f6edcc;
  --garis: #2b2140; --line-200: #2b2140; --garis-halus: #d8cba3;
  --ink-900: #2b2140; --ink-700: #433560; --ink-600: #66587f;
  --teal-950: #2b2140; --teal-900: #4a2f8f;
  --clay-500: #ffd23f; --clay-600: #f0b800;    /* "kuning koin": tombol utama & menu aktif */
  --adm-indigo: #4a2f8f; --adm-aksi-teks: #4a2f8f;
  --adm-green: #17803f; --adm-green-bg: #d3f4de;
  --adm-red: #c4202f;   --adm-red-bg: #ffd9dc;
  --adm-blue: #1a62c4;  --adm-blue-bg: #d6e8ff;
  --adm-amber: #9a5b00; --adm-amber-bg: #ffe9b0;
  --aksen-lembut: #e6dbfa;
  --tombol-gelap: #2b2140; --tombol-gelap-hover: #4a2f8f;
  --bayang-kartu: 4px 4px 0 var(--px); --bayang-panel: 4px 4px 0 var(--px);
  --baris-hover: rgba(255, 210, 63, .28);
  --tombol-hover: rgba(43, 33, 64, .10);
  --scroll-thumb: #2b2140; --scroll-thumb-hover: #4a2f8f;
  background-color: var(--latar);
  background-image: radial-gradient(rgba(43, 33, 64, .16) 1px, transparent 1px);
  background-size: 8px 8px;
}
html[data-gaya="pixel"][data-tema="gelap"] body.admin-body {
  --px: #000;
  --latar: #120e26; --cream-100: #120e26;
  --permukaan: #1d1740; --cream-50: #1d1740;
  --permukaan-2: #28205a; --cream-200: #28205a;
  --garis: #8f7be0; --line-200: #8f7be0; --garis-halus: #34296b;
  --ink-900: #f7f0d8; --ink-700: #ddd3f5; --ink-600: #b3a7d8;
  --teal-950: #0c0919; --teal-900: #6b4fd8;
  --adm-indigo: #6b4fd8; --adm-aksi-teks: #ffd23f;
  --adm-green: #5eea8e; --adm-green-bg: #12351f;
  --adm-red: #ff7a86;   --adm-red-bg: #3d1420;
  --adm-blue: #7ab8ff;  --adm-blue-bg: #14284a;
  --adm-amber: #ffc94d; --adm-amber-bg: #3a2a0a;
  --aksen-lembut: #2d2468;
  --tombol-gelap: #6b4fd8; --tombol-gelap-hover: #8268ec;
  --bayang-kartu: 4px 4px 0 #000; --bayang-panel: 4px 4px 0 #000;
  --baris-hover: rgba(255, 210, 63, .14);
  --tombol-hover: rgba(255, 255, 255, .10);
  --scroll-thumb: #8f7be0; --scroll-thumb-hover: #b3a3ff;
  background-image: radial-gradient(rgba(143, 123, 224, .20) 1px, transparent 1px);
}
html[data-gaya="pixel"] .admin-main { background: transparent; }

/* sudut siku di mana-mana */
html[data-gaya="pixel"] .admin-body :is(.panel, .statcard, .ministat-row, .admin-card, .qa, .qa-ic, .ann-ic, .mi-ic, .ic,
  .btn, .btn-dark-solid, .btn-indigo, .pv-btn, .form-control, .form-select, .ts-control, .ts-dropdown, .dropdown-menu,
  .modal-content, .alert, .badge, .chip, .badge-soft, .tabpills a, .dash-tab, .site-pagination a, .site-pagination span,
  .admin-nav-link, .admin-bell, .tema-tombol, .cari-pemicu, .cari-kotak, .preview-box, .admin-user .avatar, .avatar,
  .admin-topbar-right > a.danger, .admin-sidebar-toggle, .admin-sidebar-close, .tema-kartu, .tema-pratinjau,
  .rte-toolbar button, .rte-panel button, .card, .list-group, .progress, .page-link, .pill-date, .admin-bell .dot) {
  border-radius: 0 !important;
}

/* huruf pixel: hanya untuk judul, angka, dan label pendek */
html[data-gaya="pixel"] .admin-topbar h1 { font-family: var(--font-display); font-size: 15px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
html[data-gaya="pixel"] .panel-title { font-family: var(--font-display); font-size: 11px; font-weight: 400; line-height: 1.7; letter-spacing: 0; }
html[data-gaya="pixel"] .panel-title a { font-family: var(--font-body); font-size: 12px; }
html[data-gaya="pixel"] .statcard .val { font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
html[data-gaya="pixel"] .statcard .lab,
html[data-gaya="pixel"] .ministat .mi-lab { font-family: var(--font-pixel2); font-size: 17px; font-weight: 400; letter-spacing: .04em; }
html[data-gaya="pixel"] .ministat .mi-num { font-family: var(--font-display); font-size: 13px; font-weight: 400; }
html[data-gaya="pixel"] .admin-sidebar-brand .name { font-family: var(--font-display); font-size: 10px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
html[data-gaya="pixel"] .admin-nav-label { font-family: var(--font-pixel2); font-size: 16px; letter-spacing: .12em; padding-bottom: 4px; color: rgba(255, 255, 255, .7); }
html[data-gaya="pixel"] .admin-nav-link { font-family: var(--font-pixel2); font-size: 19px; line-height: 1.1; padding-top: 6px; padding-bottom: 6px; }
html[data-gaya="pixel"] .admin-nav-grup-btn { font-family: var(--font-pixel2); font-size: 17px; }
html[data-gaya="pixel"] .admin-main .btn, html[data-gaya="pixel"] .btn-dark-solid, html[data-gaya="pixel"] .btn-indigo,
html[data-gaya="pixel"] .tabpills a, html[data-gaya="pixel"] .dash-tab, html[data-gaya="pixel"] .qa { font-family: var(--font-pixel2); font-size: 18px; font-weight: 400; letter-spacing: .02em; }
html[data-gaya="pixel"] .badge, html[data-gaya="pixel"] .chip, html[data-gaya="pixel"] .badge-soft { font-family: var(--font-pixel2); font-size: 16px; font-weight: 400; letter-spacing: .03em; padding-top: 1px; padding-bottom: 1px; }
html[data-gaya="pixel"] .admin-main .table thead th { font-family: var(--font-pixel2); font-size: 17px; font-weight: 400; letter-spacing: .06em; }
html[data-gaya="pixel"] .site-pagination a, html[data-gaya="pixel"] .site-pagination span { font-family: var(--font-pixel2); font-size: 18px; }

/* garis tebal + bayangan keras */
html[data-gaya="pixel"] .panel,
html[data-gaya="pixel"] .statcard,
html[data-gaya="pixel"] .ministat-row,
html[data-gaya="pixel"] .admin-card { border: 3px solid var(--px); box-shadow: var(--bayang-kartu); }
html[data-gaya="pixel"][data-tema="gelap"] .panel,
html[data-gaya="pixel"][data-tema="gelap"] .statcard,
html[data-gaya="pixel"][data-tema="gelap"] .ministat-row,
html[data-gaya="pixel"][data-tema="gelap"] .admin-card { border-color: var(--garis); }
html[data-gaya="pixel"] .statcard .ic, html[data-gaya="pixel"] .ministat .mi-ic,
html[data-gaya="pixel"] .qa .qa-ic, html[data-gaya="pixel"] .ann-item .ann-ic { border: 2px solid currentColor; }
html[data-gaya="pixel"] .qa { border: 3px solid var(--garis); box-shadow: 3px 3px 0 var(--px); }
html[data-gaya="pixel"] .ministat { border-right-width: 3px; }

/* sidebar ungu tua, menu aktif = kuning koin */
html[data-gaya="pixel"] .admin-sidebar { background: var(--teal-950); border-right: 4px solid var(--px); }
html[data-gaya="pixel"][data-tema="gelap"] .admin-sidebar { border-right-color: var(--garis); }
html[data-gaya="pixel"] .admin-sidebar-brand { border-bottom: 3px dashed rgba(255, 255, 255, .25); }
html[data-gaya="pixel"] .admin-nav-link { margin: 2px 12px; padding-left: 12px; border-left: none; border: 2px solid transparent; }
html[data-gaya="pixel"] .admin-nav-link.active {
  background: #ffd23f; color: #2b2140; font-weight: 400; margin-right: 12px;
  border: 2px solid #fffbea; box-shadow: 3px 3px 0 #000;
}
html[data-gaya="pixel"] .admin-nav-link.active::before { content: "▶"; font-size: 11px; margin-right: -4px; }

/* bar atas */
html[data-gaya="pixel"] .admin-topbar { background: var(--latar); border-bottom: 4px solid var(--px); box-shadow: none; }
html[data-gaya="pixel"][data-tema="gelap"] .admin-topbar { border-bottom-color: var(--garis); }
html[data-gaya="pixel"] .admin-topbar-right > a.danger,
html[data-gaya="pixel"] .tema-tombol, html[data-gaya="pixel"] .admin-bell,
html[data-gaya="pixel"] .cari-pemicu { border: 2px solid var(--garis); box-shadow: 2px 2px 0 var(--px); }
html[data-gaya="pixel"] .admin-user .avatar { border: 2px solid var(--garis); box-shadow: 2px 2px 0 var(--px); }

/* tombol: ditekan = turun 2px, bayangan menyusut (mengganti scale 0.97 dari admin.css) */
html[data-gaya="pixel"] .admin-main .btn,
html[data-gaya="pixel"] .btn-dark-solid, html[data-gaya="pixel"] .btn-indigo, html[data-gaya="pixel"] .pv-btn {
  border: 3px solid var(--px); box-shadow: 3px 3px 0 var(--px);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2), background-color 80ms steps(2);
}
html[data-gaya="pixel"][data-tema="gelap"] .admin-main .btn,
html[data-gaya="pixel"][data-tema="gelap"] .btn-dark-solid,
html[data-gaya="pixel"][data-tema="gelap"] .btn-indigo { border-color: var(--garis); }
html[data-gaya="pixel"] .admin-body .btn:active,
html[data-gaya="pixel"] .btn-dark-solid:active, html[data-gaya="pixel"] .btn-indigo:active,
html[data-gaya="pixel"] .pv-btn:active, html[data-gaya="pixel"] .dash-tab:active, html[data-gaya="pixel"] .qa:active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--px);
}
@media (hover: hover) and (pointer: fine) {
  html[data-gaya="pixel"] .admin-main .btn:hover, html[data-gaya="pixel"] .qa:hover {
    transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--px);
  }
}
html[data-gaya="pixel"] .admin-main .btn-primary { background: #ffd23f; border-color: var(--px); color: #2b2140; }
html[data-gaya="pixel"] .admin-main .btn-primary:hover { background: #ffe27a !important; color: #2b2140 !important; }
html[data-gaya="pixel"] .tabpills a, html[data-gaya="pixel"] .dash-tab { border: 3px solid var(--garis); box-shadow: 2px 2px 0 var(--px); }
html[data-gaya="pixel"] .tabpills a.active, html[data-gaya="pixel"] .dash-tab.active { background: #ffd23f; color: #2b2140; border-color: var(--px); }
html[data-gaya="pixel"] .tabpills a.active:hover, html[data-gaya="pixel"] .dash-tab.active:hover { background: #ffd23f; color: #2b2140; }

/* formulir: kotak tegas, fokus kuning */
html[data-gaya="pixel"] .admin-main input.form-control,
html[data-gaya="pixel"] .admin-main select.form-select,
html[data-gaya="pixel"] .admin-main textarea.form-control,
html[data-gaya="pixel"] .admin-main .ts-control { border: 2px solid var(--garis); box-shadow: inset 2px 2px 0 rgba(43, 33, 64, .12); }
html[data-gaya="pixel"] .admin-main .form-control:focus,
html[data-gaya="pixel"] .admin-main .form-select:focus,
html[data-gaya="pixel"] .admin-main .ts-wrapper.focus .ts-control { border-color: var(--adm-aksi-teks); box-shadow: 3px 3px 0 #ffd23f; }
html[data-gaya="pixel"] .admin-main .ts-dropdown { border: 3px solid var(--garis); box-shadow: 4px 4px 0 var(--px); }
html[data-gaya="pixel"] .admin-main .ts-dropdown .active { background: #ffd23f; color: #2b2140; }
html[data-gaya="pixel"] .admin-main .form-label { font-weight: 600; }

/* tabel: kepala ungu, garis putus-putus */
html[data-gaya="pixel"] .admin-main .table thead th {
  background: var(--teal-950) !important; color: #fffbea !important; border-bottom: 3px solid var(--px);
}
html[data-gaya="pixel"] .admin-main .table tbody td { border-bottom: 2px dashed var(--garis-halus); }
html[data-gaya="pixel"] .admin-main .table tbody tr:hover td { background: var(--baris-hover); }
html[data-gaya="pixel"] .admin-main .table-responsive, html[data-gaya="pixel"] .admin-main .table-wrap { border: 2px solid var(--garis); }

/* lain-lain: pencarian, scrollbar, kartu tabel di HP */
html[data-gaya="pixel"] .cari-kotak { border: 3px solid var(--garis); box-shadow: 6px 6px 0 var(--px); }
html[data-gaya="pixel"] ::-webkit-scrollbar { width: 14px; height: 14px; }
html[data-gaya="pixel"] ::-webkit-scrollbar-track { background: var(--permukaan-2); border-left: 2px solid var(--garis); }
html[data-gaya="pixel"] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--permukaan-2); border-radius: 0; background-clip: border-box; }
html[data-gaya="pixel"] .admin-bell .dot { border: 2px solid var(--garis); }
@media (max-width: 760px) {
  html[data-gaya="pixel"] .admin-main table.table tr { border: 3px solid var(--garis); box-shadow: 3px 3px 0 var(--px); border-radius: 0 !important; }
  html[data-gaya="pixel"] .admin-topbar h1 { font-size: 11px; }
}
html[data-gaya="pixel"] .admin-sidebar-backdrop { background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 4px 4px; }

/* gerak dikurangi: tanpa geser/lompat, warna tetap */
@media (prefers-reduced-motion: reduce) {
  html[data-gaya] .statcard, html[data-gaya] .qa, html[data-gaya] .admin-main .btn { transform: none !important; }
}


/* ---------- strip aksi cepat & menu akun mengikuti gaya aktif ---------- */
html[data-gaya="modern"] .qa-ikon { border-radius: 16px; box-shadow: var(--bayang-kartu); }
html[data-gaya="modern"] .akun-mobile-menu { border-radius: 16px; }
html[data-gaya="pixel"] .qa-ikon { border: 3px solid var(--garis); box-shadow: 3px 3px 0 var(--px); transition: transform 80ms steps(2), box-shadow 80ms steps(2); }
html[data-gaya="pixel"] .qa-ikon:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--px); }
html[data-gaya="pixel"] .qa-ikon::after { font-family: var(--font-pixel2); font-size: 16px; border-radius: 0; }
html[data-gaya="pixel"] .qa-ikon, html[data-gaya="pixel"] .akun-mobile-menu, html[data-gaya="pixel"] .akun-mobile-btn .avatar,
html[data-gaya="pixel"] .akun-mobile-menu a, html[data-gaya="pixel"] .akun-mobile-menu button[role="menuitem"] { border-radius: 0 !important; }
html[data-gaya="pixel"] .akun-mobile-menu { border: 3px solid var(--garis); box-shadow: 4px 4px 0 var(--px); }
html[data-gaya="pixel"] .akun-mobile-btn .avatar { border: 2px solid var(--garis); box-shadow: 2px 2px 0 var(--px); }
html[data-gaya="pixel"] .akun-mobile-menu a, html[data-gaya="pixel"] .akun-mobile-menu button[role="menuitem"] { font-family: var(--font-pixel2); font-size: 19px; font-weight: 400; }


html[data-gaya="modern"] .sapa-toast { border-radius: 18px; box-shadow: var(--bayang-kartu); }
html[data-gaya="pixel"] .sapa-toast { border: 3px solid var(--garis); border-radius: 0; box-shadow: 4px 4px 0 var(--px); }
html[data-gaya="pixel"] .sapa-toast b { font-family: var(--font-pixel2); font-size: 20px; font-weight: 400; }


/* ==========================================================================
   GAYA NUSANTARA
   Mengapa: hangat, "rumah sendiri" -- cocok untuk paguyuban warga. Kertas
   krem, cokelat tua batik, terakota dan emas; judul berhuruf serif
   (Fraunces, sudah ada lokal) supaya terasa seperti buku kas RT yang rapi,
   bukan dasbor korporat. Angka dan tabel tetap sans-serif agar terbaca.
   ========================================================================== */
html[data-gaya="nusantara"] body.admin-body {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --latar: #f3ead8; --cream-100: #f3ead8;
  --permukaan: #fffdf7; --cream-50: #fffdf7;
  --permukaan-2: #f8f0df; --cream-200: #f8f0df;
  --garis: #e2d2b4; --line-200: #e2d2b4; --garis-halus: #efe4cc;
  --ink-900: #2b1d12; --ink-700: #4a3626; --ink-600: #7a6550;
  --teal-950: #3a1f17; --teal-900: #7a2e1d;
  --clay-500: #b8452f; --clay-600: #8f3322;
  --adm-indigo: #8f3322; --adm-aksi-teks: #8f3322;
  --adm-green: #2f7d4f; --adm-green-bg: #e2f1e4;
  --adm-red: #b3261e;   --adm-red-bg: #fbe0dc;
  --adm-blue: #2a5f8f;  --adm-blue-bg: #dde9f4;
  --adm-amber: #946200; --adm-amber-bg: #fbeac0;
  --aksen-lembut: #f3e2c4;
  --tombol-gelap: #3a1f17; --tombol-gelap-hover: #5a3024;
  --bayang-kartu: 0 1px 2px rgba(58, 31, 23, .06), 0 10px 26px -12px rgba(58, 31, 23, .22);
  --bayang-panel: 0 1px 2px rgba(58, 31, 23, .06), 0 6px 18px -10px rgba(58, 31, 23, .18);
  --baris-hover: rgba(200, 160, 90, .14);
  --scroll-thumb: #cdb78f; --scroll-thumb-hover: #b39a6c;
  background-color: var(--latar);
}
html[data-gaya="nusantara"][data-tema="gelap"] body.admin-body {
  --latar: #1c130e; --cream-100: #1c130e;
  --permukaan: #2a1d15; --cream-50: #2a1d15;
  --permukaan-2: #34251b; --cream-200: #34251b;
  --garis: #4a3626; --line-200: #4a3626; --garis-halus: #3a2a1e;
  --ink-900: #f6ead7; --ink-700: #e0cfb5; --ink-600: #b9a389;
  --teal-950: #140d09; --teal-900: #b8452f;
  --clay-500: #b8452f; --clay-600: #8f3322;
  --adm-indigo: #b8452f; --adm-aksi-teks: #f0b46a;
  --adm-green: #6fcf97; --adm-green-bg: #1a3324;
  --adm-red: #ff8a7d;   --adm-red-bg: #3b1a17;
  --adm-blue: #8dbbe6;  --adm-blue-bg: #182a3c;
  --adm-amber: #f2c25e; --adm-amber-bg: #3a2c0e;
  --aksen-lembut: #3d2c1d;
  --tombol-gelap: #5a3024; --tombol-gelap-hover: #704030;
  --bayang-kartu: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -12px rgba(0, 0, 0, .6);
  --bayang-panel: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -12px rgba(0, 0, 0, .55);
  --baris-hover: rgba(240, 180, 106, .10);
  --scroll-thumb: #5a4430; --scroll-thumb-hover: #7a5d40;
}
html[data-gaya="nusantara"] .admin-main { background: transparent; }
html[data-gaya="nusantara"] .admin-topbar h1,
html[data-gaya="nusantara"] .panel-title,
html[data-gaya="nusantara"] .admin-sidebar-brand .name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em; }
html[data-gaya="nusantara"] .admin-topbar h1 { font-size: 26px; }
html[data-gaya="nusantara"] .panel-title { font-size: 17px; }
html[data-gaya="nusantara"] .statcard .val, html[data-gaya="nusantara"] .ministat .mi-num { font-family: var(--font-display); font-weight: 700; }
html[data-gaya="nusantara"] .admin-sidebar {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--teal-950), color-mix(in srgb, var(--teal-950) 80%, #000));
}
html[data-gaya="nusantara"] .admin-nav-link { margin: 1px 10px; padding: 8px 14px; border-radius: 10px; border-left: none; }
html[data-gaya="nusantara"] .admin-nav-link.active { border-radius: 10px; background: linear-gradient(135deg, var(--clay-500), #d8774f); box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .35); }
html[data-gaya="nusantara"] .admin-topbar { background: var(--latar); border-bottom: 3px double var(--garis); box-shadow: none; }
html[data-gaya="nusantara"] .panel, html[data-gaya="nusantara"] .statcard, html[data-gaya="nusantara"] .admin-card, html[data-gaya="nusantara"] .ministat-row {
  border-radius: 14px; border: 1px solid var(--garis); box-shadow: var(--bayang-kartu);
}
html[data-gaya="nusantara"] .panel-title::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: linear-gradient(180deg, #d8a040, var(--clay-500)); margin-right: 8px; flex: 0 0 auto; }
html[data-gaya="nusantara"] .panel-title { justify-content: flex-start; }
html[data-gaya="nusantara"] .panel-title a { margin-left: auto; }
html[data-gaya="nusantara"] .admin-main .btn, html[data-gaya="nusantara"] .btn-dark-solid, html[data-gaya="nusantara"] .btn-indigo { border-radius: 10px; font-weight: 600; }
html[data-gaya="nusantara"] .tabpills a, html[data-gaya="nusantara"] .dash-tab { border-radius: 10px; }
html[data-gaya="nusantara"] .admin-main .table thead th { background: var(--permukaan-2) !important; }
html[data-gaya="nusantara"] .qa-ikon { border-radius: 14px; }

/* ==========================================================================
   GAYA NEON
   Mengapa: untuk yang menyukai nuansa "dashboard futuristik". Latar indigo
   pekat (atau lavender pucat di mode terang), garis tipis berpendar, judul
   monospasi huruf besar, dan satu garis gradasi cyan-magenta sebagai tanda
   tangan di tiap kartu. Tetap ringan: tanpa blur berat, hanya bayangan warna.
   ========================================================================== */
html[data-gaya="neon"] body.admin-body {
  --font-display: 'Space Mono', ui-monospace, monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --neon-a: #19b8d6; --neon-b: #c0158a;
  --latar: #f1eefb; --cream-100: #f1eefb;
  --permukaan: #ffffff; --cream-50: #ffffff;
  --permukaan-2: #f7f4ff; --cream-200: #f7f4ff;
  --garis: #d9d2f2; --line-200: #d9d2f2; --garis-halus: #ebe6fa;
  --ink-900: #1a1033; --ink-700: #3a2c63; --ink-600: #66598f;
  --teal-950: #1a1033; --teal-900: #5b2bd9;
  --clay-500: #c0158a; --clay-600: #96106b;
  --adm-indigo: #5b2bd9; --adm-aksi-teks: #5b2bd9;
  --adm-green: #0b8a5d; --adm-green-bg: #d8f6ea;
  --adm-red: #c4163f;   --adm-red-bg: #ffdce6;
  --adm-blue: #1561c8;  --adm-blue-bg: #dbe9ff;
  --adm-amber: #9a5b00; --adm-amber-bg: #ffecc2;
  --aksen-lembut: #e8e0ff;
  --tombol-gelap: #1a1033; --tombol-gelap-hover: #3a2480;
  --bayang-kartu: 0 1px 2px rgba(26, 16, 51, .05), 0 12px 28px -12px rgba(91, 43, 217, .25);
  --bayang-panel: 0 1px 2px rgba(26, 16, 51, .05), 0 8px 22px -12px rgba(91, 43, 217, .2);
  --baris-hover: rgba(91, 43, 217, .06);
  --scroll-thumb: #c9bff0; --scroll-thumb-hover: #a898e6;
}
html[data-gaya="neon"][data-tema="gelap"] body.admin-body {
  --latar: #0a0720; --cream-100: #0a0720;
  --permukaan: #130e33; --cream-50: #130e33;
  --permukaan-2: #1b1445; --cream-200: #1b1445;
  --garis: #2e2470; --line-200: #2e2470; --garis-halus: #231a58;
  --ink-900: #f0ecff; --ink-700: #cfc7f5; --ink-600: #9d92d6;
  --teal-950: #070516; --teal-900: #7a4dff;
  --clay-500: #c0158a; --clay-600: #96106b;
  --adm-indigo: #6b3df0; --adm-aksi-teks: #4de1ff;
  --adm-green: #3ef0a8; --adm-green-bg: #0d3a2c;
  --adm-red: #ff6b9a;   --adm-red-bg: #3d0f26;
  --adm-blue: #6bc5ff;  --adm-blue-bg: #0f2c4d;
  --adm-amber: #ffd166; --adm-amber-bg: #3a2a08;
  --aksen-lembut: #241a63;
  --tombol-gelap: #6b3df0; --tombol-gelap-hover: #8460ff;
  --bayang-kartu: 0 0 0 1px rgba(77, 225, 255, .08), 0 14px 32px -14px rgba(77, 225, 255, .22);
  --bayang-panel: 0 0 0 1px rgba(77, 225, 255, .06), 0 10px 26px -14px rgba(77, 225, 255, .18);
  --baris-hover: rgba(77, 225, 255, .08);
  --scroll-thumb: #3a2f86; --scroll-thumb-hover: #5646b8;
}
html[data-gaya="neon"] .admin-main { background: transparent; }
html[data-gaya="neon"] .admin-topbar h1,
html[data-gaya="neon"] .panel-title,
html[data-gaya="neon"] .admin-sidebar-brand .name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
html[data-gaya="neon"] .admin-topbar h1 { font-size: 20px; }
html[data-gaya="neon"] .panel-title { font-size: 13px; }
html[data-gaya="neon"] .statcard .val, html[data-gaya="neon"] .ministat .mi-num, html[data-gaya="neon"] .admin-stat .num { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
html[data-gaya="neon"] .statcard .lab, html[data-gaya="neon"] .admin-main .table thead th { font-family: var(--font-display); letter-spacing: .08em; }
html[data-gaya="neon"] .admin-sidebar { background: linear-gradient(180deg, var(--teal-950), #0c0824); border-right: 1px solid rgba(77, 225, 255, .15); }
html[data-gaya="neon"] .admin-nav-link { margin: 1px 10px; padding: 8px 14px; border-radius: 10px; border-left: none; }
html[data-gaya="neon"] .admin-nav-link.active {
  border-radius: 10px; background: linear-gradient(135deg, #c0158a, #6b3df0);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 8px 22px -6px rgba(192, 21, 138, .65);
}
html[data-gaya="neon"] .admin-topbar { background: color-mix(in srgb, var(--latar) 88%, transparent); border-bottom: 1px solid var(--garis); box-shadow: 0 1px 0 rgba(77, 225, 255, .12); }
html[data-gaya="neon"] .panel, html[data-gaya="neon"] .statcard, html[data-gaya="neon"] .admin-card, html[data-gaya="neon"] .ministat-row {
  position: relative; border-radius: 16px; border: 1px solid var(--garis); box-shadow: var(--bayang-kartu);
}
html[data-gaya="neon"] .panel::before, html[data-gaya="neon"] .statcard::before {   /* garis tanda tangan */
  content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--neon-a), var(--neon-b)); opacity: .9; pointer-events: none;
}
html[data-gaya="neon"] .admin-main .btn-primary { background: linear-gradient(135deg, #c0158a, #6b3df0); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(192, 21, 138, .7); }
html[data-gaya="neon"] .admin-main .btn-primary:hover { filter: brightness(1.08); }
html[data-gaya="neon"] .admin-main .btn, html[data-gaya="neon"] .btn-dark-solid, html[data-gaya="neon"] .btn-indigo { border-radius: 10px; font-weight: 600; }
html[data-gaya="neon"] .tabpills a, html[data-gaya="neon"] .dash-tab { border-radius: 999px; }
html[data-gaya="neon"] .qa-ikon { border-radius: 14px; }
html[data-gaya="neon"] .qa-ikon:hover { box-shadow: 0 0 0 1px var(--adm-aksi-teks), 0 10px 24px -10px var(--adm-aksi-teks); }
html[data-gaya="neon"] .admin-main .form-control:focus, html[data-gaya="neon"] .admin-main .form-select:focus,
html[data-gaya="neon"] .admin-main .ts-wrapper.focus .ts-control { border-color: var(--adm-aksi-teks); box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-aksi-teks) 25%, transparent); }

/* ---------- pratinjau kartu pilihan di Pengaturan ---------- */
.tema-nusantara { background: #f3ead8; border-radius: 12px; border: 1px solid #e2d2b4; }
.tema-nusantara i { background: #fffdf7; border-radius: 10px; box-shadow: 0 6px 14px -8px rgba(58, 31, 23, .45); border-left: 5px solid #b8452f; }
.tema-nusantara i:nth-child(1) { height: 70%; } .tema-nusantara i:nth-child(2) { height: 100%; border-left-color: #d8a040; } .tema-nusantara i:nth-child(3) { height: 52%; border-left-color: #2f7d4f; }
.tema-neon { background: #0a0720; border-radius: 12px; }
.tema-neon i { background: #130e33; border-radius: 10px; border-top: 3px solid #19b8d6; box-shadow: 0 0 0 1px rgba(77, 225, 255, .15), 0 8px 20px -8px rgba(77, 225, 255, .4); }
.tema-neon i:nth-child(1) { height: 70%; } .tema-neon i:nth-child(2) { height: 100%; border-top-color: #c0158a; } .tema-neon i:nth-child(3) { height: 52%; border-top-color: #6b3df0; }

/* ---------- .admin-stat (Laporan Tunggakan dst.) ikut huruf & ukuran tema, sama seperti .statcard ---------- */
html[data-gaya="modern"] .admin-stat .num { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
html[data-gaya="pixel"] .admin-stat .num { font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
html[data-gaya="pixel"] .admin-stat .cap { font-family: var(--font-pixel2); font-size: 17px; font-weight: 400; letter-spacing: .04em; }
html[data-gaya="nusantara"] .admin-stat .num { font-family: var(--font-display); font-weight: 700; }
html[data-gaya="neon"] .admin-stat .num { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
html[data-gaya="neon"] .admin-stat .cap { font-family: var(--font-display); letter-spacing: .08em; }


/* ---------- tabel standar mengikuti gaya ---------- */
html[data-gaya="modern"] .tbs { border-radius: 20px; box-shadow: var(--bayang-kartu); }
html[data-gaya="modern"] .admin-topbar { background: color-mix(in srgb, var(--latar) 94%, transparent); }
html[data-gaya="nusantara"] .tbs { border-radius: 14px; box-shadow: var(--bayang-kartu); }
html[data-gaya="nusantara"] .admin-main .tbs table.table thead th { font-family: var(--font-body); }
html[data-gaya="neon"] .tbs { border-radius: 16px; box-shadow: var(--bayang-kartu); }
html[data-gaya="neon"] .admin-main .tbs table.table thead th { font-family: var(--font-display); letter-spacing: .08em; }
html[data-gaya="pixel"] .tbs { border: 3px solid var(--garis); border-radius: 0 !important; box-shadow: 4px 4px 0 var(--px); }
html[data-gaya="pixel"] .tbs.dalam-panel { border: 0; box-shadow: none; }
html[data-gaya="pixel"] .tbs-cari input, html[data-gaya="pixel"] .tbs-tombol, html[data-gaya="pixel"] .tbs-pop { border: 2px solid var(--garis); border-radius: 0 !important; }
html[data-gaya="pixel"] .tbs-pop { border-width: 3px; box-shadow: 4px 4px 0 var(--px); }
html[data-gaya="pixel"] .tbs-tombol { font-family: var(--font-pixel2); font-size: 18px; font-weight: 400; box-shadow: 2px 2px 0 var(--px); }
html[data-gaya="pixel"] .tbs .t-main { font-family: var(--font-body); }
html[data-gaya="pixel"] .tbs td .tbs-ikon { border-radius: 0 !important; }
html[data-gaya="pixel"] .site-pagination .current { background: #ffd23f; color: #2b2140; border-color: var(--px); }


/* ==========================================================================
   TAB BERSIH (garis bawah) -- satu gaya untuk semua tab admin:
   .dash-tabs (dashboard), .tabpills (filter/rentang), .nav-tabs (Pengaturan).
   Ditaruh PALING AKHIR dan memakai spesifisitas tinggi supaya menimpa varian tema
   (pixel/nusantara/neon/modern) yang sebelumnya membuat tab berbentuk tombol.
   ========================================================================== */
html[data-gaya] .admin-main :is(.dash-tabs, .tabpills, .nav-tabs) {
  display: flex; flex-wrap: nowrap; gap: 2px; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 0 18px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--garis, var(--line-200));
  box-shadow: none;
}
html[data-gaya] .admin-main :is(.dash-tabs, .tabpills, .nav-tabs)::-webkit-scrollbar { display: none; }
html[data-gaya] .admin-main :is(.dash-tab, .tabpills a, .nav-tabs .nav-link) {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap;
  min-height: 44px; padding: 11px 16px; margin: 0 0 -1px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none;
  color: var(--ink-600); background: transparent; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; transform: none;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
html[data-gaya] .admin-main :is(.dash-tab, .tabpills a, .nav-tabs .nav-link) i { font-size: 15px; opacity: .85; }
html[data-gaya] .admin-main :is(.dash-tab, .tabpills a, .nav-tabs .nav-link):hover {
  color: var(--ink-900); background: transparent; border-bottom-color: var(--garis, var(--line-200));
}
html[data-gaya] .admin-main :is(.dash-tab.active, .tabpills a.active, .nav-tabs .nav-link.active),
html[data-gaya] .admin-main :is(.dash-tab.active, .tabpills a.active, .nav-tabs .nav-link.active):hover {
  color: var(--adm-aksi-teks, var(--adm-indigo, #4f46e5)); background: transparent;
  border-bottom-color: var(--adm-aksi-teks, var(--adm-indigo, #4f46e5));
}
html[data-gaya] .admin-main .tabpills a.masuk.active  { color: var(--adm-green); border-bottom-color: var(--adm-green); }
html[data-gaya] .admin-main .tabpills a.keluar.active { color: var(--adm-red);   border-bottom-color: var(--adm-red); }
html[data-gaya] .admin-main :is(.dash-tab, .tabpills a, .nav-tabs .nav-link):focus-visible {
  outline: 2px solid var(--adm-aksi-teks, #4f46e5); outline-offset: -2px; border-radius: 6px;
}
html[data-gaya] .admin-main :is(.dash-tab, .tabpills a, .nav-tabs .nav-link):active { transform: none; }