/* BAKTI — kulit kaca cair. Dimuat PALING AKHIR setelah css/styles.css.
   Hanya mengubah rupa (warna, bentuk, bayangan, gerak); struktur dan logika tidak disentuh. */

/* ---------- Kerangka ---------- */
.content { animation: bkRise 260ms var(--ease-out); }
.main { min-width: 0; }

@media (min-width: 761px) {
  .app-shell { grid-template-columns: 276px 1fr; }
  .sidebar {
    margin: 12px 0 12px 12px; height: calc(100dvh - 24px); border-radius: 26px; padding: 18px 12px;
    background: linear-gradient(165deg, rgba(20, 70, 168, .86), rgba(10, 36, 98, .84));
    -webkit-backdrop-filter: blur(28px) saturate(1.9); backdrop-filter: blur(28px) saturate(1.9);
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 24px 54px rgba(10, 36, 98, .30);
  }
  .topbar {
    margin: 12px 16px 0; top: 12px; height: 58px; border-radius: 20px; padding: 0 20px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-edge), var(--glass-shadow);
  }
  .content { padding: 22px 16px 40px; }
}
@media (max-width: 760px) {
  .sidebar { background: linear-gradient(165deg, rgba(20, 70, 168, .94), rgba(10, 36, 98, .94)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-radius: 0 26px 26px 0; }
  .topbar { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-line); }
}

/* ---------- Sidebar ---------- */
.sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, .16); padding-bottom: 14px; }
.sidebar-brand img { border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.sidebar-brand .t1 { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sidebar-brand .t2 { color: #bfe9fb; font-size: 11.5px; font-weight: 600; }
.nav-group-label { color: rgba(255, 255, 255, .72); font-size: 10.5px; letter-spacing: .09em; font-weight: 700; border-radius: 10px; }
.nav-group-label:hover { color: #fff; }
.nav-item { color: rgba(255, 255, 255, .86); border-radius: 13px; font-weight: 500; padding: 9px 11px; transition: background 160ms var(--ease-out), color 160ms ease, transform 120ms var(--ease-out), box-shadow 160ms ease; }
.nav-item:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .nav-item:hover { background: rgba(255, 255, 255, .13); color: #fff; } }
.nav-item.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .16));
  color: #fff; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 16px rgba(5, 20, 60, .22);
}
.nav-item.soon, .nav-item.nav-subgroup-label, .nav-item.nav-subgroup-label:hover { color: rgba(255, 255, 255, .62); }
.sidebar-footer { border-top-color: rgba(255, 255, 255, .16); }
.user-name { color: #fff; } .user-role { color: rgba(255, 255, 255, .72); }
.user-avatar { background: linear-gradient(160deg, #8ec0ff, #3f86f0); color: #06214f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 8px rgba(0, 0, 0, .25); }
.user-chip:hover { background: rgba(255, 255, 255, .10); }
.logout-btn { border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .88); border-radius: 12px; }
.logout-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mode-switch { background: rgba(255, 255, 255, .12); border-radius: 14px; }

/* ---------- Topbar ---------- */
.topbar .crumb-eyebrow { color: var(--ink-500); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.topbar .crumb-title { font-family: var(--font-display); font-size: 15px; font-weight: 750; letter-spacing: -.01em; color: var(--ink-900); }
.notif-bell, .icon-btn { border-radius: 12px; }
.notif-badge { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }

/* ---------- Judul halaman ---------- */
.page-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: var(--ink-900); }
.page-head p { color: var(--ink-500); font-size: 13.5px; }

/* ---------- Permukaan kaca ---------- */
.card, .stat-card, .work-widget {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-shadow);
}
.card { transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out); }
.stat-card { padding: 16px 18px; transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .stat-card:hover { transform: translateY(-2px) !important; box-shadow: var(--glass-edge), var(--glass-shadow-lift) !important; }
}
.stat-card:nth-child(n) { box-shadow: var(--glass-edge), var(--glass-shadow); }
.stat-card .stat-label { color: var(--ink-500); font-weight: 600; font-size: 12px; letter-spacing: .01em; }
.stat-card .stat-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.03em; color: var(--ink-900); }
.stat-card .stat-accent { display: none; }

/* ---------- Tombol ---------- */
.btn { font-family: var(--font-ui); font-weight: 650; letter-spacing: -.005em; padding: 10px 18px; transition: transform 140ms var(--ease-out), background 160ms ease, box-shadow 160ms ease, filter 160ms ease; }
.btn:active { transform: scale(.97); }
.btn-primary, .btn-gold {
  background: linear-gradient(180deg, #2b78f0 0%, #1d66e4 55%, #1858c8 100%); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 1px 2px rgba(18, 52, 120, .25), 0 8px 20px rgba(29, 102, 228, .28);
}
@media (hover: hover) and (pointer: fine) { .btn-primary:hover, .btn-gold:hover { background: linear-gradient(180deg, #3584f5 0%, #2272ec 55%, #1b5fd6 100%); filter: none; } }
.btn-primary:active, .btn-gold:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px rgba(29, 102, 228, .3) !important; }
.btn-ghost {
  background: rgba(255, 255, 255, .55); color: var(--ink-800); border: 1px solid rgba(18, 52, 120, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: rgba(255, 255, 255, .9); border-color: rgba(18, 52, 120, .3); color: var(--ink-900); } }
.btn-danger { background: rgba(251, 228, 226, .8); color: #a11f18; border: 1px solid rgba(179, 38, 30, .2); }
.btn:focus-visible, .nav-item:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29, 102, 228, .38); }

/* ---------- Formulir ---------- */
.field label { font-weight: 650; color: var(--ink-700); font-size: 12.5px; }
.field input, .field select, .field textarea, .toolbar .search-box input, .select-filter {
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(18, 52, 120, .16); border-radius: 13px; font-family: var(--font-ui);
  box-shadow: inset 0 1px 2px rgba(18, 52, 120, .05); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus, .toolbar .search-box input:focus {
  background: #fff; border-color: #1d66e4; outline: none; box-shadow: 0 0 0 4px rgba(29, 102, 228, .18);
}
.toolbar { background: transparent; }

/* ---------- Tabel ---------- */
.data-table th { background: rgba(234, 240, 251, .6); color: var(--ink-500); border-bottom: 1px solid var(--glass-hair); font-weight: 700; }
.data-table td { border-bottom: 1px solid rgba(18, 52, 120, .07); color: var(--ink-800); }
.data-table tbody tr { transition: background 140ms ease; }
@media (hover: hover) and (pointer: fine) { .data-table tbody tr:hover { background: rgba(87, 142, 245, .10); } }
.mono-tag { background: rgba(234, 240, 251, .9); color: var(--ink-800); border-radius: 8px; }
.badge { border-radius: 999px; font-weight: 650; }
.pagination button.active { background: #1d66e4; border-color: #1d66e4; color: #fff; }

/* ---------- Dialog dan pemberitahuan ---------- */
.modal-overlay { background: rgba(10, 26, 62, .34); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.modal {
  background: rgba(255, 255, 255, .86); border: 1px solid var(--glass-line); border-radius: var(--radius-xl);
  -webkit-backdrop-filter: blur(30px) saturate(1.7); backdrop-filter: blur(30px) saturate(1.7);
  box-shadow: var(--glass-edge), 0 4px 6px rgba(12, 26, 58, .06), 0 30px 80px rgba(10, 36, 98, .28);
}
.modal-head { border-bottom: 1px solid var(--glass-hair); }
.modal-foot { background: rgba(234, 240, 251, .55); border-top: 1px solid var(--glass-hair); }
.toast {
  background: rgba(12, 26, 58, .86); color: #fff; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); font-weight: 550;
}
.toast.success { background: rgba(21, 94, 58, .92); } .toast.error { background: rgba(170, 36, 28, .93); }

/* ---------- Layar masuk ---------- */
.login-screen {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); place-items: stretch; gap: 0; padding: 16px; min-height: 100dvh;
  background: none; animation: none;
}
.login-screen::before, .login-screen::after { display: none; }
.login-hero {
  position: relative; overflow: hidden; border-radius: 34px; padding: 30px 40px 32px; color: #fff; min-height: 0; height: calc(100dvh - 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  background:
    radial-gradient(60% 55% at 85% 8%, rgba(101, 208, 244, .55), transparent 70%),
    radial-gradient(50% 50% at 8% 100%, rgba(242, 247, 160, .38), transparent 70%),
    linear-gradient(160deg, #1d62d8, #0f3a9c 70%);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 70px rgba(10, 36, 98, .30);
}
.lh-chip { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34); color: #fff; font-weight: 650; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.lh-copy h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.028em; line-height: 1.1; color: #fff; text-wrap: balance; }
.lh-copy p { color: rgba(255, 255, 255, .9); line-height: 1.55; }
.lh-copy { margin: 0; position: relative; z-index: 1; }
.lh-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.lh-logo { width: 76px; height: 76px; object-fit: contain; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(5, 20, 60, .35); flex: none; }
.lh-chip { position: relative; z-index: 1; }
.lh-foot { position: relative; z-index: 1; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .82); }
.login-pane { display: grid; place-items: center; padding: 24px; background: transparent; }
.login-card {
  width: 100%; max-width: 420px; padding: 34px 32px; border-radius: 32px;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: var(--glass-edge), 0 4px 8px rgba(12, 26, 58, .05), 0 34px 80px rgba(18, 52, 120, .20);
  animation: bkPop 380ms var(--ease-out);
}
.login-brand img { border-radius: 16px; box-shadow: 0 8px 22px rgba(18, 52, 120, .22); }
.login-brand .brand-title { color: var(--ink-900); font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.login-brand .brand-by { color: var(--ink-500); font-weight: 600; font-size: 12px; }
.login-card h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; color: var(--ink-900); }
.login-card .btn-gold, .login-submit { padding: 13px 18px; font-size: 14.5px; }
.login-foot { color: var(--ink-500); }
@media (max-width: 900px) {
  .login-screen { grid-template-columns: 1fr; padding: 12px; }
  .login-hero { display: none; }
  .login-pane { padding: 12px; min-height: calc(100dvh - 24px); }
}

/* Pengguna & keluar tetap terlihat di dasar sidebar */
.sidebar-footer { position: sticky; bottom: -18px; margin: auto -4px -18px; padding: 12px 8px 18px; background: rgba(11, 38, 100, .97); border-top: 1px solid rgba(255, 255, 255, .16); border-radius: 0 0 24px 24px; z-index: 2; }

/* ===== Billboard (admin web depan) ===== */
.bb-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.bb-status small{color:var(--ink-500)}
.bb-tabs{display:flex;gap:6px;overflow-x:auto;padding:6px;margin:0 0 16px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-edge,rgba(255,255,255,.7));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);scrollbar-width:thin}
.bb-tab{flex:none;border:0;background:transparent;padding:9px 14px;border-radius:12px;font:600 13.5px var(--font-ui);color:var(--ink-600,#41506f);cursor:pointer;transition:background .18s var(--ease-out,ease),color .18s,transform .16s}
.bb-tab:active{transform:scale(.97)}
.bb-tab.aktif{background:#1d66e4;color:#fff}
@media (hover:hover) and (pointer:fine){.bb-tab:not(.aktif):hover{background:rgba(29,102,228,.1)}}
.bb-kartu{padding:20px;margin:0 0 16px}
.bb-kartu h3{margin:0 0 4px;font:700 17px var(--font-display,var(--font-ui))}
.bb-ket{margin:0 0 12px;color:var(--ink-500);font-size:13.5px;line-height:1.5}
.bb-hint{display:block;margin-top:4px;color:var(--ink-500);font-size:12px;line-height:1.4}
.bb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bb-lebar{grid-column:1/-1}
.bb-grid .field{margin:0}
.bb-cek{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.bb-cek input{margin-top:3px;width:18px;height:18px;flex:none}
.bb-kepala-daftar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.bb-item{border:1px solid rgba(29,102,228,.14);border-radius:16px;padding:14px;margin:0 0 12px;background:rgba(255,255,255,.5)}
.bb-item-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.bb-item-kepala b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-item-kepala span{display:flex;gap:4px;flex:none}
.bb-merah{color:#b42318!important}
.bb-sub{display:grid;gap:12px;padding:14px;border-radius:16px;border:1px solid rgba(29,102,228,.14);background:rgba(255,255,255,.5)}
.bb-gbr{display:flex;gap:12px;align-items:center;margin:0 0 8px}
.bb-gbr img{width:96px;height:64px;object-fit:cover;border-radius:12px;background:#e6edf8}
.bb-kosong{display:grid;place-items:center;width:96px;height:64px;border-radius:12px;border:1px dashed var(--ink-300);color:var(--ink-500);font-size:11px;text-align:center}
.bb-cek-daftar{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bb-cek-daftar li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.bb-cek-daftar .bb-tanda{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#eef2fa;color:var(--ink-500);font-size:12px;font-weight:700}
.bb-cek-daftar li.ok .bb-tanda{background:#dff5e6;color:#166534}
.bb-unggah{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.bb-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:56vh;overflow:auto}
.bb-m{position:relative}
.bb-m>button:first-child{border:0;padding:0;width:100%;border-radius:12px;overflow:hidden;cursor:pointer;background:#e6edf8;transition:transform .16s var(--ease-out,ease)}
.bb-m>button:first-child:active{transform:scale(.97)}
.bb-m img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.bb-m-hapus{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(10,20,50,.7);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.bb-pv-bar{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.bb-pv-bingkai{display:flex;justify-content:center;background:#dfe7f5;border-radius:14px;padding:8px}
.bb-pv-bingkai iframe{width:100%;height:62vh;border:0;border-radius:10px;background:#fff;transition:width .25s var(--ease-out,ease)}
.bb-riwayat{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bb-riwayat li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(29,102,228,.06)}
@media(max-width:700px){.bb-grid{grid-template-columns:1fr}.bb-kepala-daftar{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.bb-tab,.bb-m>button:first-child,.bb-pv-bingkai iframe{transition:none}}

/* Logo BAKTI tetap di atas saat menu di-scroll */
.sidebar-brand { position: sticky; top: -18px; z-index: 3; margin: -18px -4px 6px; padding: 18px 12px 14px; background: rgba(20, 70, 168, .98); border-radius: 24px 24px 0 0; }
@media (max-width: 760px) { .sidebar-brand { top: -20px; margin-top: -20px; padding-top: 20px; border-radius: 0 26px 0 0; } }

/* =====================================================================
   Lapisan "bagian dalam": seragam untuk semua halaman (Keuangan, Perpustakaan,
   Inventaris, Absensi, dst.). Hanya rupa; logika tidak disentuh.
   ===================================================================== */
input, select, textarea, button { font-family: inherit; }
input[type=checkbox], input[type=radio] { accent-color: #1d66e4; }
:focus-visible { outline: 2px solid #1d66e4; outline-offset: 2px; border-radius: 8px; }
.content ::-webkit-scrollbar, .modal-body::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 10px; height: 10px; }
.content ::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: rgba(60, 90, 150, .28); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }

/* Sidebar: warna dasar utuh supaya logo dan akun yang menempel tidak berbeda warna */
@media (min-width: 761px) {
  .sidebar { background: linear-gradient(170deg, #1a56c8 0%, #12409a 52%, #0c2a6e 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sidebar-brand { background: #1a56c8; }
.sidebar-footer { background: #0c2a6e; }
@media (max-width: 760px) { .sidebar { background: linear-gradient(170deg, #1a56c8 0%, #12409a 52%, #0c2a6e 100%); } }

/* Ikon garis pengganti emoji */
svg.ik { width: 1.12em; height: 1.12em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; margin-right: .4em; }
.btn svg.ik:only-child, .notif-bell svg.ik, .icon-btn svg.ik { margin-right: 0; }
.notif-bell { color: var(--ink-700); } .notif-bell svg.ik { width: 21px; height: 21px; vertical-align: middle; }
.empty-state .emoji { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 18px; background: rgba(29, 102, 228, .1); color: #1d66e4; font-size: 0; }
.empty-state .emoji svg.ik { width: 26px; height: 26px; margin: 0; }
.page-head h2 svg.ik { color: #1d66e4; margin-right: .35em; }

/* Keuangan memakai warna dasar yang sama dengan halaman lain */
[id^="page-keuangan-"] { --kw-bg: transparent; --kw-border: var(--ink-100); --kw-text: var(--ink-900); --kw-text-secondary: var(--ink-500); --kw-primary-600: #1b3274; }
[id^="page-keuangan-"] .page-head h2 { font-family: var(--font-display); color: var(--ink-900); }

/* Judul halaman */
.page-head { align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.page-head h2 { font-family: var(--font-display); font-size: 27px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; }
.page-head p { max-width: 70ch; color: var(--ink-500); font-size: 14px; line-height: 1.55; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Kartu dan angka ringkasan */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #1d66e4, #30b8e8); opacity: .75; }
.stat-card .stat-label { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-500); }
.stat-card .stat-value, .kv-value { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.02em; }

/* Tabel */
.table-wrap, .table-scroll, .data-table-wrap { border-radius: 18px; }
table { border-collapse: separate; border-spacing: 0; }
th { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); background: rgba(29, 102, 228, .06); padding: 11px 14px; border-bottom: 1px solid rgba(29, 102, 228, .14); white-space: nowrap; }
th:first-child { border-top-left-radius: 12px; } th:last-child { border-top-right-radius: 12px; }
td { padding: 12px 14px; border-bottom: 1px solid rgba(60, 90, 150, .1); font-size: 13.5px; vertical-align: middle; }
tbody tr { transition: background 120ms ease; }
@media (hover: hover) and (pointer: fine) { tbody tr:hover td { background: rgba(29, 102, 228, .045); } }
tbody tr:last-child td { border-bottom: 0; }

/* Isian */
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351607d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { transition: border-color 140ms ease, box-shadow 160ms ease, background 140ms; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { outline: none; border-color: #1d66e4; box-shadow: 0 0 0 4px rgba(29, 102, 228, .16); }
.field > label, label.lbl { font-size: 12.5px; font-weight: 650; color: var(--ink-700); letter-spacing: .005em; }

/* Lencana */
.badge { font-weight: 650; letter-spacing: .01em; }

/* Bilah alat di atas tabel */
.toolbar { gap: 10px; }

/* Panel petunjuk bernomor (Perpustakaan, dll.) */
.step-card, .howto-card { border-radius: 20px; }

/* Penampang kecil: tulisan jangan terlalu padat */
@media (max-width: 760px) {
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head h2 { font-size: 23px; }
  th, td { padding: 10px 11px; }
}
.page-head h2 svg.ik { display: none; }
th { white-space: normal; }
svg.ik-check { color: #2a8057; stroke-width: 2.5; }
svg.ik-warn { color: #b3261e; }
.content select:not(.bb-x), .modal select { border: 1px solid var(--ink-100); border-radius: 12px; background-color: #fff; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; color: var(--ink-900); }
@media (max-width: 760px) {
  .content div:has(> .btn + .btn), .toolbar { flex-wrap: wrap; }
  .content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.content select, .modal select { min-height: 38px; border-radius: 13px; padding-right: 34px; background-color: #fff; background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351607d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* ===== Foto siswa, kartu pelajar, bagikan kartu ujian ===== */
.kt-prog{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}.kt-prog small{display:block;color:var(--ink-500,#5f6d8c)}
.kt-bar{flex:1;min-width:160px;height:8px;border-radius:99px;background:rgba(27,50,116,.12);overflow:hidden}.kt-bar i{display:block;height:100%;background:#1b3274;border-radius:99px;transition:width .3s cubic-bezier(.23,1,.32,1)}
.kt-baris{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.kt-merah{color:#b42318}
.kt-th{width:40px;height:53px;object-fit:cover;border-radius:6px;border:1px solid rgba(27,50,116,.18);display:block;background:#eef1f8}.kt-th.kosong{display:flex;align-items:center;justify-content:center;color:#8a98b8}
.kt-filter{margin-bottom:12px}
.kt-hal{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 4px 2px;flex-wrap:wrap}.kt-bar-wrap{margin:0}.kt-proses,.kt-hasil{margin-top:10px;font-size:.9rem}.kt-hasil div{margin-top:4px}
.kt-ttd{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.kt-ttd-pv{width:160px;height:80px;border:1px dashed rgba(27,50,116,.3);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#8a98b8;background:#fff;overflow:hidden}.kt-ttd-pv img{max-width:100%;max-height:100%}
.kt-ttd-isi{flex:1;min-width:200px}.kt-ttd-isi small{display:block;color:#5f6d8c;margin:2px 0 6px}
.kt-pv{width:100%;height:760px;border:1px solid rgba(27,50,116,.15);border-radius:12px;background:#fff;margin-top:12px}
.uj-bagi,.uj-ttd{margin-top:14px;padding:14px 16px;border:1px solid rgba(27,50,116,.14);border-radius:14px;background:rgba(255,255,255,.7)}
.uj-bagi-kepala{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.uj-bagi-kepala small{display:block;color:#5f6d8c}.uj-bagi details{margin-top:10px}.uj-bagi summary{cursor:pointer;font-weight:600}