/* SIMPEL — Sistem Informasi Manajemen Pelatihan (tema VibeCoder: soft indigo glass) */
* { box-sizing: border-box; }
/* atribut `hidden` harus selalu menyembunyikan, walau elemen punya display: flex
   dari kelasnya (mis. bilah editan & tombol reset editan) */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1F1B3A;
  background: #F3F0FF;
  min-height: 100vh;
  line-height: 1.55;
  overflow-x: hidden;
}
.orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: -1; opacity: .55; pointer-events: none; }
.orb1 { width: 480px; height: 480px; background: #C7D2FE; top: -140px; left: -120px; }
.orb2 { width: 420px; height: 420px; background: #FBCFE8; top: 30%; right: -160px; opacity: .4; }
.orb3 { width: 460px; height: 460px; background: #E9D5FF; bottom: -160px; left: 22%; opacity: .45; }

a { color: #4F46E5; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255,255,255,.62); border-bottom: 1px solid rgba(255,255,255,.8); }
.topbar-in { max-width: 1440px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: nowrap; }   /* header SELALU satu baris */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: #1F1B3A; font-size: 16px; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4F46E5, #8B5CF6); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 6px 14px rgba(79,70,229,.35);
  overflow: hidden; flex: 0 0 auto; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-nama { font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.brand-tag { font-size: 10.5px; font-weight: 500; color: #635F82; letter-spacing: .1px; }
.topnav { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; justify-content: center; align-items: center; }
.nav-links { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; justify-content: center; align-items: center; }
.topbar-aksi { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: 8px; }
.topnav a { padding: 8px 12px; border-radius: 10px; color: #4b4770; font-weight: 600; font-size: 14px; }
.topnav a:hover { background: rgba(79,70,229,.08); text-decoration: none; }
.topnav a.on { background: linear-gradient(135deg, #4F46E5, #8B5CF6); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.3); }

/* Tombol menu (☰) — hanya tampil di layar sempit, lihat media query ≤860px */
.nav-toggle { display: none; align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  width: 42px; height: 38px; padding: 0; cursor: pointer; flex: 0 0 auto;
  background: rgba(255,255,255,.75); border: 1px solid rgba(79,70,229,.22); border-radius: 12px; color: #4338CA; }
.nav-toggle:hover { background: #fff; border-color: rgba(79,70,229,.45); }
.nav-toggle .nt-bar { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s, opacity .18s; }
.topbar.abuka .nav-toggle .nt-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar.abuka .nav-toggle .nt-bar:nth-child(2) { opacity: 0; }
.topbar.abuka .nav-toggle .nt-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 28px 24px 60px; }

/* ---------- kartu dasar ---------- */
.card { border-radius: 18px; }
.glass { background: rgba(255,255,255,.6); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 10px 30px rgba(60,50,140,.10); padding: 22px; margin-bottom: 20px; }
.card h2 { margin: 0 0 4px; font-size: 20px; color: #1F1B3A; }
.card h3 { margin: 4px 0 14px; font-size: 15px; color: #1F1B3A; letter-spacing: .1px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dim { color: #635F82; font-size: 13px; }
.card-inner { background: rgba(79,70,229,.05); border: 1px solid rgba(79,70,229,.12); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #4b4770; }
.tips { margin-top: 16px; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(135deg, rgba(238,242,255,.85), rgba(250,240,255,.7)); padding: 30px 30px 24px; }
.hero h1 { margin: 0 0 8px; font-size: 27px; line-height: 1.25; background: linear-gradient(120deg,#312E81,#6D28D9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 0 0 18px; color: #4b4770; max-width: 780px; }
.hero-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.stat { background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); border-radius: 14px; padding: 10px 20px; min-width: 150px; box-shadow: 0 4px 14px rgba(60,50,140,.08); }
.stat-n { font-size: 24px; font-weight: 800; color: #4F46E5; }
.stat-l { font-size: 12px; color: #635F82; }

/* ---------- flash ---------- */
.flash { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 14px; font-weight: 500;
  border: 1px solid; animation: pop .25s ease; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
.flash-ok { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.flash-err { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }

/* ---------- grid ---------- */
.dashgrid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items: start; }
.dash-main > .card:last-child { margin-bottom: 0; }
.dash-side > .card:last-child { margin-bottom: 0; }
.workgrid { display: grid; grid-template-columns: 288px minmax(0,1fr); gap: 20px; align-items: start; }
/* Anak grid default ber-min-width:auto -> konten lebar (tabel/preview) bisa memaksa
   kolom melebihi layar. min-width:0 membuat kolom mengikuti lebar wadah dan
   biarkan scroll internal (.tablewrap / #pv) yang menangani konten lebar. */
.workgrid > * { min-width: 0; }

/* ---------- tombol ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #4F46E5, #8B5CF6); color: #fff; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 12px; box-shadow: 0 6px 16px rgba(79,70,229,.28); transition: transform .12s, box-shadow .12s, filter .12s; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; box-shadow: 0 8px 20px rgba(79,70,229,.35); }
.btn:active { transform: translateY(0); }
.btn-ghost { background: rgba(255,255,255,.75); color: #4338CA; border: 1px solid rgba(79,70,229,.25); box-shadow: none; }
.btn-ghost:hover { background: #fff; box-shadow: none; }
.btn-danger { color: #B91C1C; border-color: rgba(220,38,38,.3); }
.btn-danger:hover { background: #FEF2F2; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn-xs { padding: 4px 9px; font-size: 12px; border-radius: 8px; box-shadow: none; }
.btn-primary { }

/* ---------- form ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.lbl { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #3d3964; }
.lbl small { font-weight: 400; color: #8b86a8; }
.span2 { grid-column: span 2; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=file], select, textarea {
  font: inherit; color: #1F1B3A; background: rgba(255,255,255,.85); border: 1px solid rgba(99,95,130,.25);
  border-radius: 10px; padding: 9px 12px; width: 100%; transition: border .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
textarea { resize: vertical; min-height: 70px; }
.row-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }

/* ---------- badge & chip ---------- */
.kat { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; }
/* Warna kategori (permintaan user): Klasikal oranye · On-Site hijau · e-Learning biru.
   Lembut (gradasi pastel-ke-medium) tapi tetap kontras & jelas berbeda. */
.kat-oranye { background: linear-gradient(135deg,#F59E0B,#FDBA74); }
.kat-hijau  { background: linear-gradient(135deg,#10B981,#6EE7B7); }
.kat-biru   { background: linear-gradient(135deg,#3B82F6,#93C5FD); }
.kat-indigo { background: linear-gradient(135deg,#6366F1,#8B5CF6); }
.chip { display: inline-block; background: rgba(99,95,130,.1); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; color: #4b4770; margin-right: 6px; }
.tag { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.tag-docx { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.tag-xlsx { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.tag-count { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }
.ext-docx, .ext-xlsx { margin-left: auto; font-size: 9.5px; font-weight: 800; color: #fff; border-radius: 6px; padding: 2px 6px; }
.ext-docx { background: #3B82F6; }
.ext-xlsx { background: #22A06B; }

/* ---------- daftar kegiatan (beranda) ---------- */
.keg-row { display: flex; align-items: center; gap: 14px; padding: 13px 6px; border-top: 1px solid rgba(99,95,130,.12); flex-wrap: wrap; }
.keg-row:first-of-type { border-top: 0; }
.keg-info { flex: 1; min-width: 220px; }
.keg-nama { font-weight: 700; color: #1F1B3A; font-size: 15px; }
.keg-nama:hover { color: #4F46E5; }
.keg-meta { font-size: 12.5px; margin-top: 2px; }
.keg-chips { margin-top: 6px; }
.keg-act { display: flex; gap: 8px; align-items: center; }
.keg-act form { margin: 0; }
.empty { color: #8b86a8; font-size: 13.5px; margin: 8px 0 4px; }
.empty-cell { text-align: center; color: #8b86a8; padding: 20px !important; }

/* ---------- workspace ---------- */
.crumbs { font-size: 13px; color: #635F82; margin-bottom: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wnav { position: sticky; top: 78px; padding: 14px 10px; max-height: calc(100vh - 100px); overflow-y: auto; }
.wnav-h { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: #8b86a8; padding: 10px 8px 6px; }
.wnav-sec + .wnav-sec { border-top: 1px solid rgba(99,95,130,.14); margin-top: 8px; padding-top: 6px; }
.wnav-grup { font-size: 11px; font-weight: 800; color: #635F82; padding: 10px 8px 3px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- collapse / expand menu ---------- */
.wnav-tools { display: flex; justify-content: flex-end; padding: 0 4px 6px; }
.wnav-all { display: inline-flex; align-items: center; gap: 6px; background: rgba(79,70,229,.07);
  border: 1px solid rgba(79,70,229,.18); color: #4338CA; font: inherit; font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 9px; cursor: pointer; transition: background .15s, border-color .15s; }
.wnav-all:hover { background: rgba(79,70,229,.13); border-color: rgba(79,70,229,.32); }
.wnav-all-ic { font-size: 12px; line-height: 1; }
.wnav-tgl { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
.wnav-tgl:hover { background: rgba(79,70,229,.06); color: #4338CA; }
.wnav-tgl .chev { flex: none; font-size: 10px; line-height: 1; color: #8b86a8;
  transition: transform .18s ease; transform-origin: 50% 50%; }
.wnav-tgl.collapsed .chev { transform: rotate(-90deg); }
.wnav-tgl.has-active { color: #4338CA; }
.wnav-body { overflow: hidden; }
.wnav-body.collapsed { display: none; }
.wnav-body.anim { animation: navOpen .18s ease; }
@keyframes navOpen { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.wnav-grup { margin-top: 2px; }
.wnav-grp .wnav-body { padding-left: 3px; }

.wnav-i { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; font-size: 13px; color: #3d3964; font-weight: 600; }
.wnav-i:hover { background: rgba(79,70,229,.07); text-decoration: none; }
.wnav-i.on { background: linear-gradient(135deg, #EEF2FF, #F5F3FF); box-shadow: inset 0 0 0 1.5px rgba(79,70,229,.35); color: #4338CA; }
.wnav-ic { width: 20px; text-align: center; flex: none; }
.wnav-ic.kod { width: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; background: rgba(99,95,130,.12); border-radius: 6px; padding: 2px 5px; color: #635F82; }
.wnav-i.ws { font-weight: 500; }
.ws-t { flex: 1; }
.wmain > .card:first-child { margin-top: 0; }
.wmain .card:last-child { margin-bottom: 0; }

/* ---------- tabel data ---------- */
.tablewrap { overflow-x: auto; margin-top: 6px; border-radius: 12px; border: 1px solid rgba(99,95,130,.14); background: rgba(255,255,255,.7); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
.tbl th { background: rgba(79,70,229,.07); color: #37346b; text-align: left; padding: 9px 10px; font-size: 12px; font-weight: 700; border-bottom: 1px solid rgba(99,95,130,.18); white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid rgba(99,95,130,.10); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgba(79,70,229,.035); }
.tbl-aksi { white-space: nowrap; width: 130px; }
.tbl-aksi form { display: inline; margin: 0 0 0 4px; }
.inner-tab { margin-bottom: 14px; }

/* ---------- source bar ---------- */
.srcbar { background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(139,92,246,.08)); border: 1px solid rgba(79,70,229,.18);
  border-radius: 12px; padding: 10px 14px; font-size: 13px; color: #4b4770; margin: 0 0 16px; }

/* ---------- lain ---------- */
.ok-line { color: #047857; font-size: 13.5px; font-weight: 600; }
.warn-line { color: #B45309; font-size: 13.5px; font-weight: 600; }
.logo-prev { margin-bottom: 10px; }
.logo-prev img { max-height: 90px; max-width: 100%; border-radius: 10px; border: 1px solid rgba(99,95,130,.2); background: #fff; padding: 6px; }

/* pratinjau identitas aplikasi (2h) */
.idapp-preview { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 16px;
  border-radius: 14px; background: rgba(79,70,229,.06); border: 1px solid rgba(79,70,229,.16); }
.idapp-mark { width: 40px; height: 40px; border-radius: 13px; }
.idapp-note { margin-left: auto; }
.login-sub { margin: -4px 0 12px; }
.steps { margin: 0; padding-left: 18px; font-size: 13px; color: #4b4770; display: flex; flex-direction: column; gap: 6px; }
.tight { margin: 0; padding-left: 18px; font-size: 13px; color: #4b4770; display: flex; flex-direction: column; gap: 6px; }
.foot { text-align: center; color: #8b86a8; font-size: 12px; padding: 0 20px 40px; }
.ok-line { display: block; }

/* ---------- template dokumen & preview realtime ---------- */
.lite { font-weight: 400; font-size: 12.5px; }
.tpl-status { font-size: 13.5px; color: #3d3964; margin: 2px 0 12px; }
.chip-on { background: #ECFDF5 !important; color: #047857 !important; border: 1px solid #A7F3D0; }
.tpl-up { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tpl-file { min-width: 320px; flex: 1; }
.tpl-act { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.tpl-act form { margin: 0; }
.tpl-docs { margin-top: 14px; }
.tpl-docs summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: #4338CA; }
.tpl-docs summary:hover { text-decoration: underline; }
.tpl-docs .steps { margin-bottom: 12px; }

/* petunjuk singkat di halaman kertas kerja */
.tpl-hint { margin-top: 14px; background: rgba(79,70,229,.05); border: 1px solid rgba(79,70,229,.14);
  border-radius: 12px; padding: 10px 14px; font-size: 13px; color: #4b4770; }

/* halaman Data Master → Template Kertas Kerja */
.tpl-guide { margin-top: 4px; }
.tpl-grup h3 { margin-bottom: 10px; }
.tpl-grup { padding-bottom: 14px; }
.tpl-item { border: 1px solid rgba(99,95,130,.18); border-radius: 12px; background: rgba(255,255,255,.55); margin-bottom: 10px; }
.tpl-item.ada { border-color: rgba(16,185,129,.35); background: rgba(236,253,245,.5); }
.tpl-item > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; flex-wrap: wrap; }
.tpl-item > summary:hover { background: rgba(79,70,229,.05); border-radius: 12px; }
.tpl-item[open] > summary { border-bottom: 1px solid rgba(99,95,130,.14); }
.tpl-kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; background: rgba(99,95,130,.12);
  border-radius: 6px; padding: 2px 6px; color: #635F82; }
.tpl-judul { font-weight: 600; font-size: 13.5px; color: #1F1B3A; flex: 1; min-width: 180px; }
.tpl-body { padding: 14px; }
.ws-ext.kount { margin-left: auto; font-size: 9.5px; font-weight: 800; color: #fff; border-radius: 6px; padding: 2px 6px; background: #6D28D9; }
.tokg-all { display: flex; flex-direction: column; gap: 14px; }
.tokg h5 { margin: 0 0 8px; font-size: 12.5px; color: #37346b; letter-spacing: .02em; }
.tokl { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.tok { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.75);
  border: 1px solid rgba(79,70,229,.18); border-radius: 9px; padding: 3px 8px; }
.tok code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #4F46E5; background: none; padding: 0; }
.tok small { color: #8b86a8; font-size: 11px; }
.tok-arrow { color: #8b86a8; font-size: 11px; }

.pv-card { margin-top: 0; }
.pv-head { align-items: center; }
.pv-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-status { font-size: 12px; color: #8b86a8; }
.pv-status.pv-ok { color: #047857; font-weight: 600; }
.pv-status.pv-warn { color: #B45309; }
.pv-status.pv-err { color: #B91C1C; font-weight: 600; }
#pv { margin-top: 4px; border-radius: 14px; background: #EDEBF6; border: 1px solid rgba(99,95,130,.18);
  padding: 18px; overflow-x: auto; min-height: 320px; max-height: 78vh; overflow-y: auto; }
.pv-empty { color: #8b86a8; font-size: 13.5px; padding: 40px 10px; text-align: center; }
.pv-err { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; border-radius: 12px; padding: 18px; font-size: 13.5px; }
.pv-info { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; border-radius: 12px; padding: 18px; font-size: 13.5px; }
.pv-sheet { margin-bottom: 18px; }
.pv-sheet:last-child { margin-bottom: 0; }
.pv-sheet-name { font-size: 12px; font-weight: 700; color: #4b4770; margin-bottom: 6px; }
.pv-xls { background: #fff; border-radius: 8px; padding: 4px; overflow-x: auto; }
.pv-xls table { border-collapse: collapse; font-family: Calibri, Arial, sans-serif; font-size: 12px; }
.pv-xls table td, .pv-xls table th { border: 1px solid #d8d6e8; padding: 3px 8px; }
.pv-xls .pv-c { vertical-align: top; }
.pv-xls .pv-c-num { text-align: right; }
.pv-empty2 { background: #fff; border-radius: 8px; padding: 14px; color: #8b86a8; font-size: 12.5px; }

/* hasil docx-preview */
#pv .docx-wrapper { background: transparent; padding: 0; }
#pv .docx { background: #fff; box-shadow: 0 8px 26px rgba(60,50,140,.16); border-radius: 4px; margin: 0 auto 16px; }
#pv .docx .docx-container { padding: 0; }

@media (max-width: 620px) {
  .tpl-file { min-width: 100%; }
  #pv { padding: 10px; }
}

/* ---------- login ---------- */
.login-wrap { max-width: 520px; margin: 0 auto; padding: 48px 20px 60px; }
.login-brand { display: flex; gap: 14px; align-items: center; justify-content: center; margin-bottom: 22px; text-align: left; }
.login-brand h1 { margin: 0; font-size: 21px; }
.login-brand p { margin: 2px 0 0; }
.brand-mark.lg { width: 48px; height: 48px; border-radius: 15px; font-size: 17px; }
.login-card { padding: 26px; }
.login-card h2 { margin-bottom: 14px; }
.login-note { margin: 16px 0 0; font-size: 12.5px; }
.login-foot { text-align: center; margin-top: 16px; font-size: 12.5px; }

/* ---------- kotak pengguna di topbar ---------- */
.userbox { display: flex; align-items: center; gap: 10px; padding-left: 6px; flex: 0 0 auto; }
.ubar-txt { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.uname { font-size: 13px; font-weight: 700; color: #1F1B3A; }
.umeta { font-size: 11px; color: #8b86a8; }
.logout-form { margin: 0; }
.tn-ic { margin-right: 5px; font-size: 12px; }
/* label menu boleh berpindah baris DI DALAM tombolnya supaya menu tetap satu baris */
.topnav a { white-space: normal; text-align: center; line-height: 1.18; flex: 0 1 auto; }

/* ---------- tab submenu ---------- */
.subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.subtab { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 4px 14px rgba(60,50,140,.07);
  border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: #3d3964; }
.subtab:hover { text-decoration: none; background: #fff; color: #4338CA; }
.subtab.on { background: linear-gradient(135deg, #4F46E5, #8B5CF6); color: #fff; box-shadow: 0 6px 16px rgba(79,70,229,.3); }
.subtab.on:hover { color: #fff; }
.subtab .st-kod { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  background: rgba(99,95,130,.14); border-radius: 6px; padding: 2px 6px; color: #635F82; }
.subtab.on .st-kod { background: rgba(255,255,255,.28); color: #fff; }
.subtab .st-ic { font-size: 14px; }
.subtab .st-jml, .subtab .dim { font-size: 11px; font-weight: 500; opacity: .8; }
.subtabs.sm .subtab { padding: 7px 12px; font-size: 12.5px; }
.tag-segera { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }

/* ---------- pemilih tahun ---------- */
.tahunbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.tahunbar h2 { margin: 0 0 2px; }
.tb-sel { min-width: 150px; }
select[name=tahun] { font-size: 15px; font-weight: 700; padding: 8px 12px; }

/* ---------- kartu statistik ---------- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { margin: 0; padding: 16px 18px; }
.stat-card .stat-n { font-size: 26px; font-weight: 800; color: #4F46E5; line-height: 1.15; }
.stat-card .stat-l { font-size: 13px; font-weight: 700; color: #1F1B3A; margin-top: 2px; }
.kecil { font-size: 11.5px; }

/* ---------- bar horizontal ---------- */
.barrow { display: grid; grid-template-columns: 150px 1fr 92px; align-items: center; gap: 10px; margin-bottom: 8px; }
.barlbl { font-size: 12.5px; color: #3d3964; font-weight: 600; }
.bartrack { background: rgba(99,95,130,.12); border-radius: 999px; height: 12px; overflow: hidden; }
.barfill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366F1, #8B5CF6); }
.barfill.kat-oranye { background: linear-gradient(90deg,#F59E0B,#FDBA74); }
.barfill.kat-hijau  { background: linear-gradient(90deg,#10B981,#6EE7B7); }
.barfill.kat-biru   { background: linear-gradient(90deg,#3B82F6,#93C5FD); }
.barfill.kat-indigo { background: linear-gradient(90deg,#6366F1,#8B5CF6); }
.barval { font-size: 12.5px; text-align: right; font-weight: 700; color: #4338CA; }

/* ---------- grafik kolom per bulan ---------- */
.bulgrid { display: flex; gap: 6px; align-items: flex-end; height: 190px; padding-top: 8px; }
.bulcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bulbar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bulbar { width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg,#8B5CF6,#6366F1); min-height: 0; }
.buln { font-size: 11px; font-weight: 700; color: #4338CA; margin-top: 4px; }
.bulbl { font-size: 10px; color: #8b86a8; }

/* ---------- kalender ---------- */
.kal-peta { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.kal-bulan { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); border-radius: 14px; padding: 12px; }
.kal-h { font-size: 12.5px; font-weight: 800; color: #37346b; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.kal-kosong { font-size: 12px; padding: 6px 0; }
.kal-keg { display: flex; flex-direction: column; gap: 2px; border-left: 4px solid #6366F1; border-radius: 8px;
  background: rgba(79,70,229,.07); padding: 7px 10px; margin-bottom: 8px; color: #1F1B3A; }
.kal-keg:hover { text-decoration: none; background: rgba(79,70,229,.13); }
.kal-keg.kat-oranye { border-left-color: #F59E0B; background: rgba(245,158,11,.10); }
.kal-keg.kat-hijau  { border-left-color: #10B981; background: rgba(16,185,129,.10); }
.kal-keg.kat-biru   { border-left-color: #3B82F6; background: rgba(59,130,246,.10); }
.kal-tgl { font-size: 11px; color: #635F82; font-weight: 600; }
.kal-nama { font-size: 12.5px; font-weight: 600; }
.kal-tmp { font-size: 11px; color: #635F82; }
.legend { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tbl-matriks { min-width: 1000px; }
.tbl-matriks td { font-size: 12.5px; }

/* ---------- pengaturan akun ---------- */
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline-form select { width: auto; min-width: 190px; padding: 5px 8px; font-size: 12px; }
select[disabled] { opacity: .7; background: rgba(99,95,130,.08); }
details.mini { display: inline-block; }
details.mini summary { list-style: none; display: inline-block; cursor: pointer; }
.mini-form { margin-top: 6px; background: rgba(255,255,255,.8); border: 1px solid rgba(99,95,130,.2);
  border-radius: 10px; padding: 8px; min-width: 180px; }
.inp-xs { padding: 5px 8px; font-size: 12px; }
.req-item { border-top: 1px solid rgba(99,95,130,.14); padding: 10px 0; }
.req-item:first-of-type { border-top: 0; }
.chip-wait { background: #FEF3C7; color: #92400E; }
.chip-off { background: #FEE2E2; color: #991B1B; }
.satker-nama { border-bottom: 1px solid rgba(99,95,130,.16); padding-bottom: 14px; margin-bottom: 6px; }
.satker-nama .lbl { max-width: 420px; }

@media (max-width: 620px) {
  .barrow { grid-template-columns: 110px 1fr 62px; }
  .userbox .ubar-txt { display: none; }
  .bulgrid { height: 150px; }
}

@media (max-width: 1020px) {
  .dashgrid, .workgrid { grid-template-columns: minmax(0, 1fr); }
  .wnav { position: static; max-height: none; }
}
@media (max-width: 1200px) {
  /* tetap SATU baris di layar menengah: sembunyikan keterangan pengguna lebih awal */
  .userbox .ubar-txt { display: none; }
}
@media (max-width: 1320px) {
  .topnav a .tn-ic { display: none; }      /* hemat ruang: pakai teks saja */
}
@media (max-width: 1120px) {
  .topbar-in { padding: 9px 14px; gap: 10px; }
  .topnav { gap: 2px; }
  .nav-links { gap: 2px; }
  .topnav a { padding: 7px 9px; font-size: 13px; }
  .brand-txt { font-size: 15px; }
  .brand-tag { font-size: 10px; }
}

/* ---------- MOBILE: menu pindah ke panel dropdown (tombol ☰) ----------
   Di layar sempit, 5 menu tidak mungkin muat mendatar — sebelumnya label
   terpecah 2–3 baris dan tampak berantakan. Sejak ≤980px menu masuk panel
   sehingga header tetap RAPI satu baris dan tiap item satu baris penuh. */
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .topbar-in { position: relative; }
  .brand-txt { display: flex; }            /* nama aplikasi tetap tampil */
  .topnav {
    position: absolute; top: calc(100% + 8px); left: 10px; right: 10px;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 10px; border-radius: 16px; z-index: 40;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 18px 40px rgba(60,50,140,.22);
    justify-content: flex-start;
  }
  .topbar.abuka .topnav { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 2px; flex: 0 0 auto; }
  .topnav a {
    white-space: nowrap; text-align: left; padding: 12px 12px; font-size: 14.5px;
    border-radius: 10px; display: flex; align-items: center; gap: 10px;
  }
  .topnav a .tn-ic { display: inline; width: 18px; text-align: center; }   /* ikon tampil lagi di panel */
  .topnav a:hover { background: rgba(79,70,229,.08); }
  .topnav a.on { box-shadow: none; }
  .topbar-aksi {
    margin: 6px 0 0; padding-top: 10px; width: 100%;
    border-top: 1px solid rgba(99,95,130,.16);
    justify-content: space-between;
  }
  .userbox { padding-left: 0; }
  .userbox .ubar-txt { display: flex; text-align: left; }   /* di panel ada ruang: tampilkan identitas */
}
@media (max-width: 620px) {
  .topbar-in { padding: 8px 12px; gap: 10px; }
  .brand-nama { font-size: 15px; }
  .brand-tag { display: none; }            /* layar sempit: cukup nama saja */
  .nav-toggle { width: 40px; height: 36px; }
}
@media (max-width: 470px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand-nama { font-size: 14px; }
}
@media (max-width: 620px) {
  .grid2 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .wrap { padding: 20px 14px 50px; }
  .hero h1 { font-size: 22px; }
}

/* ---------- Pengaturan Umum Tahap 2: 2c–2f ---------- */
.ks-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ks-row .lbl { min-width: 130px; }
.ks-row input, .ks-row select { min-width: 120px; }
.kertas-semua { border-top: 1px solid rgba(99,95,130,.16); margin-top: 16px; padding-top: 14px; }
.chip.baku { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; font-size: 10.5px; padding: 1px 6px; }
.pj-item { padding-bottom: 14px; }
.hapus-pejabat { margin-top: 10px; }
.pg-form { width: 100%; }
.pg-form input[name=uraian] { flex: 1; min-width: 240px; }
.tarif-inp { max-width: 130px; }
.tbl .chip { vertical-align: middle; }
@media (max-width: 720px) {
  .ks-row .lbl { min-width: 100%; }
  .pg-form { flex-wrap: wrap; }
  .pg-form input[name=uraian] { min-width: 100%; }
}

/* daftar token bisa panjang setelah bertambahnya token 2c–2f */
.tokg-all { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.tpl-docs .tokg-all { margin-top: 10px; }

/* ---------- jenis peserta (ASN / Non ASN) ---------- */
.chip-asn { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
.chip-nonasn { background: #F5F3FF; color: #7C3AED; border: 1px solid #DDD6FE; }
.man-item > summary { flex-wrap: wrap; }
.man-item .tpl-judul { min-width: 220px; }

/* ---------- Form Biodata Peserta (publik & internal) ---------- */
.biodata-page { max-width: 980px; margin: 0 auto; padding: 34px 18px 60px; }
.biodata-card { padding: 26px; }
.biodata-kop { border-bottom: 3px double rgba(99,95,130,.35); padding-bottom: 12px; margin-bottom: 16px; }
.bk-nama { font-size: 17px; font-weight: 800; color: #1F1B3A; letter-spacing: .01em; }
.biodata-head h1 { margin: 0 0 4px; font-size: 22px;
  background: linear-gradient(120deg,#312E81,#6D28D9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.biodata-head { margin-bottom: 14px; }
.wajib { color: #DC2626; font-weight: 800; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jenis-pilih { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.jenis-opt { display: flex; flex-direction: column; gap: 3px; border: 1.5px solid rgba(99,95,130,.25);
  border-radius: 14px; padding: 14px 16px; cursor: pointer; background: rgba(255,255,255,.6); transition: border-color .15s, background .15s; }
.jenis-opt:hover { background: #fff; }
.jenis-opt input { margin: 0 0 4px; width: auto; }
.jenis-opt.on { border-color: #6366F1; background: rgba(79,70,229,.08); box-shadow: 0 6px 18px rgba(79,70,229,.12); }
.jo-t { font-weight: 800; font-size: 15px; color: #1F1B3A; }
.jo-d { font-size: 12.5px; color: #635F82; }
.biodata-form .lbl small { display: block; }
.biodata-form input[type=text], .biodata-form select { width: 100%; }
@media (max-width: 620px) {
  .jenis-pilih { grid-template-columns: 1fr; }
  .biodata-page { padding: 20px 12px 50px; }
  .biodata-card { padding: 18px; }
}
/* tabel pratinjau impor */
.tbl-impor { min-width: 1200px; font-size: 12px; }
.tbl-impor td { vertical-align: top; }
.tbl-impor tr.baris-dup { background: rgba(254,242,242,.7); }

/* ---------- grup kolom & alat peserta ---------- */
.form-grup { grid-column: 1 / -1; margin-top: 8px; padding: 6px 10px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(139,92,246,.08));
  border: 1px solid rgba(79,70,229,.16); font-size: 12.5px; font-weight: 800; color: #4338CA; letter-spacing: .02em; }
.ttl-hint { grid-column: 1 / -1; font-size: 12.5px; color: #4b4770; background: rgba(79,70,229,.05);
  border: 1px dashed rgba(79,70,229,.28); border-radius: 10px; padding: 8px 12px; }
.alat-peserta { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ap-blok { background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(60,50,140,.07); }
.ap-blok h4 { margin: 0 0 6px; font-size: 13.5px; color: #1F1B3A; }
.ap-blok .dim { margin: 0 0 10px; }
.ap-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ap-act form { margin: 0; }
.ap-link { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ap-link input { font-size: 12.5px; }
.ap-jenis { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

/* ---------- TEMA LATAR per kategori pelatihan (ditambahkan atas permintaan user) ----------
   Saat masuk ke pelatihan kategori tertentu, latar halaman mengikuti warnanya
   (Klasikal oranye · On-Site hijau · e-Learning biru). Topbar/menu TIDAK diubah
   agar tetap memakai tema aplikasi (indigo/glass). */
body.tema-A { background: #FFF7ED; }
body.tema-B { background: #F0FDF4; }
body.tema-C { background: #EFF6FF; }
body.tema-A .orb1 { background: #FED7AA; opacity: .65; }
body.tema-A .orb2 { background: #FDE68A; opacity: .45; }
body.tema-A .orb3 { background: #FDBA74; opacity: .4; }
body.tema-B .orb1 { background: #A7F3D0; opacity: .65; }
body.tema-B .orb2 { background: #BBF7D0; opacity: .5; }
body.tema-B .orb3 { background: #6EE7B7; opacity: .38; }
body.tema-C .orb1 { background: #BFDBFE; opacity: .65; }
body.tema-C .orb2 { background: #BAE6FD; opacity: .5; }
body.tema-C .orb3 { background: #93C5FD; opacity: .4; }
/* aksen kartu kategori pada halaman Pelatihan */
.kat-card { border-top: 3px solid transparent; }
.kat-card-oranye { border-top-color: #FDBA74; }
.kat-card-hijau  { border-top-color: #6EE7B7; }
.kat-card-biru   { border-top-color: #93C5FD; }
/* kartu & tabel tetap netral agar teks mudah dibaca di atas latar berwarna */
body.tema-A .card.glass, body.tema-B .card.glass, body.tema-C .card.glass { background: rgba(255,255,255,.72); }

/* ---------- daftar WS (2b & 2g): alat buka/tutup & tabel kelola ---------- */
.wslist-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.wslist-tools .btn { gap: 6px; }
#tpl-info { font-size: 12px; }
.ws-stat { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ws-stat form { margin: 0 0 0 auto; }
.ws-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(99,95,130,.18); border-radius: 12px; padding: 12px 14px; }
.ws-meta-opt { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #3d3964; }
.ws-meta-opt input { width: auto; }
.tbl-ws { min-width: 900px; }
.tbl-ws td { vertical-align: top; }
.tbl-ws .tbl-aksi form { display: inline; margin-left: 4px; }

/* ---------- edit live pada preview & berkas TTE ---------- */
.pv-skip { outline: none !important; cursor: default; }
/* Area yang bisa diketik TIDAK diberi garis/border secara default (agar pratinjau
   tampak sama seperti Word). Penanda hanya muncul saat disorot/difokus/disunting. */
.pv-edit { cursor: text; border-radius: 2px; transition: background .12s, box-shadow .12s; }
.pv-edit:hover { background: rgba(79,70,229,.07); box-shadow: inset 0 0 0 1px rgba(79,70,229,.35); }
.pv-edit.pv-focus { background: rgba(79,70,229,.09); box-shadow: inset 0 0 0 1px #6366F1; }
.pv-edit.pv-changed { background: #FFFBEB; box-shadow: inset 0 0 0 1px #F59E0B; }
.pv-xls td.pv-edit { border-radius: 0; }
.pv-editbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px;
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(253,186,116,.10));
  border: 1px solid rgba(245,158,11,.45); border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: #92400E; }
.pv-editbar .btn { margin-left: auto; }
.pv-editbar #pv-batal { margin-left: auto; }
.pv-editbar #pv-simpan { margin-left: 0; }
.pv-tip { font-size: 12.5px; margin: 6px 0 2px; }
.pv-status.pv-warn { color: #B45309; font-weight: 600; }
.pv-card.pv-dirty-on #pv { border-color: rgba(245,158,11,.55); }

/* kartu TTE Srikandi */
.tte-box { margin-top: 4px; }
.tte-box h3 { margin: 0 0 6px; }
.tte-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.tte-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.tte-form .tpl-file { min-width: 300px; flex: 1; }
.tte-msg { font-size: 12.5px; margin-top: 8px; min-height: 18px; }
.tte-msg.tte-ok { color: #047857; font-weight: 600; }
.tte-msg.tte-err { color: #B91C1C; font-weight: 600; }

/* ---------- pratinjau: ruler, zoom, mode edit (mirip Word) ---------- */
.pv-zoombar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(99,95,130,.18); border-radius: 12px; padding: 7px 12px; font-size: 12.5px; }
.pv-zoombar-lbl { font-weight: 700; color: #3d3964; }
.pv-zoom-val { min-width: 44px; text-align: center; font-weight: 700; color: #4338CA; }
.pv-legend { margin-left: auto; color: #047857; }
.pv-wrap { position: relative; }
/* mistar cm */
.pv-ruler { position: relative; height: 22px; margin: 0 auto 6px; border-radius: 6px; max-width: none;
  background: repeating-linear-gradient(90deg, rgba(99,95,130,.35) 0 1px, transparent 1px 3.7795px),
              linear-gradient(#F3F2FA, #E9E7F5);
  border: 1px solid rgba(99,95,130,.25); box-shadow: inset 0 1px 2px rgba(60,50,140,.08);
  overflow: hidden; }
.pv-ruler::before, .pv-ruler::after { content: ''; position: absolute; top: 0; bottom: 0; background: rgba(99,95,130,.16); }
.pv-ruler::before { left: 0; width: var(--pv-ml, 0px); }
.pv-ruler::after { right: 0; width: var(--pv-mr, 0px); }
.pv-ruler-lbl { position: absolute; top: 3px; font-size: 9px; color: #635F82; transform: translateX(2px); }
/* area gulir dokumen */
.pv-scroll { overflow: auto; max-height: 80vh; padding: 14px 10px 18px; border-radius: 14px;
  background: #E7E5F2; border: 1px solid rgba(99,95,130,.2); }
#pv { padding: 0; border: 0; background: transparent; max-height: none; overflow: visible; min-height: 0; }
#pv .docx-wrapper { background: transparent; padding: 0; }
#pv .docx { box-shadow: 0 10px 28px rgba(60,50,140,.20); margin: 0 auto 18px; }
/* penanda paragraf yang memuat gambar mengambang (KOP) */
#pv .pv-anchor-par { position: static; }
#pv section.docx.pv-ada-anchor { position: relative; }
/* hint saat klik bukan area teks */
.pv-hint { margin-top: 8px; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E;
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; }
/* jangan beri latar pada semua paragraf (agar tampilan bersih seperti Word) */
#pv .pv-anchor-par { position: static; }
@media (max-width: 720px) {
  .pv-legend { margin-left: 0; }
  .pv-scroll { padding: 8px 4px 12px; }
}

/* ---------- hasil pemeriksaan Parameter template (2b) ---------- */
.pindai-item { border-top: 1px solid rgba(99,95,130,.14); padding: 8px 0; font-size: 13px; }
.pindai-item:first-of-type { border-top: 0; }
.pindai-item code { font-size: 11.5px; word-break: break-all; }
.pindai .chip-wait { background: #FEF3C7; color: #92400E; }

/* ============================================================
 * TOMBOL TEMA (header) + TEMA GELAP
 * ============================================================ */
.tema-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; flex: 0 0 auto;
  font-size: 12.5px; font-weight: 700; color: #4338CA; background: rgba(255,255,255,.75);
  border: 1px solid rgba(79,70,229,.25); border-radius: 10px; padding: 7px 12px; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s; }
.tema-btn:hover { background: #fff; border-color: rgba(79,70,229,.45); }
.tema-btn .tema-ic { font-size: 13px; line-height: 1; }
.login-top, .biodata-top { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.login-top { max-width: 520px; margin: 0 auto 4px; padding: 0 20px; }

/* ---------- tema gelap ---------- */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #131120; color: #ECEAF7; }
html[data-theme="dark"] .orb { opacity: .28; }
html[data-theme="dark"] .orb1 { background: #4C1D95; }
html[data-theme="dark"] .orb2 { background: #831843; }
html[data-theme="dark"] .orb3 { background: #1E3A8A; }
html[data-theme="dark"] a { color: #A5B4FC; }
html[data-theme="dark"] .topbar { background: rgba(24,21,38,.72); border-bottom-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .brand, html[data-theme="dark"] .uname { color: #ECEAF7; }
html[data-theme="dark"] .brand-tag { color: #A8A2C6; }
html[data-theme="dark"] .umeta, html[data-theme="dark"] .dim { color: #A8A2C6; }
html[data-theme="dark"] .topnav a { color: #C7C2E0; }
html[data-theme="dark"] .topnav a:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .topnav a.on { background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #fff; }
html[data-theme="dark"] .tema-btn { background: rgba(255,255,255,.10); color: #DCD8F5; border-color: rgba(255,255,255,.20); }
html[data-theme="dark"] .tema-btn:hover { background: rgba(255,255,255,.18); }
html[data-theme="dark"] .nav-toggle { background: rgba(255,255,255,.10); color: #DCD8F5; border-color: rgba(255,255,255,.20); }
html[data-theme="dark"] .nav-toggle:hover { background: rgba(255,255,255,.18); }
html[data-theme="dark"] .topnav { background: rgba(28,24,44,.97); border-color: rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
html[data-theme="dark"] .topbar-aksi { border-top-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .glass { background: rgba(35,31,54,.72); border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); }
html[data-theme="dark"] .card h2, html[data-theme="dark"] .card h3,
html[data-theme="dark"] .hero h1, html[data-theme="dark"] .biodata-head h1 { color: #F2F0FB; }
html[data-theme="dark"] .hero { background: linear-gradient(135deg, rgba(49,46,129,.55), rgba(88,28,135,.40)); }
html[data-theme="dark"] .hero p { color: #C7C2E0; }
html[data-theme="dark"] .stat, html[data-theme="dark"] .stat-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .stat-l, html[data-theme="dark"] .crumbs, html[data-theme="dark"] .title-sub { color: #A8A2C6; }
html[data-theme="dark"] .stat-n { color: #A5B4FC; }
html[data-theme="dark"] .card-inner, html[data-theme="dark"] .srcbar, html[data-theme="dark"] .tahunbar,
html[data-theme="dark"] .tpl-hint, html[data-theme="dark"] .ttl-hint, html[data-theme="dark"] .pv-zoombar,
html[data-theme="dark"] .ws-stat, html[data-theme="dark"] .pindai, html[data-theme="dark"] .ap-blok,
html[data-theme="dark"] .mini-form, html[data-theme="dark"] .ws-meta-grid {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #DCD8F5; }
html[data-theme="dark"] .srcbar { color: #C7C2E0; }
html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=file],
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background: rgba(16,14,26,.85); color: #ECEAF7; border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] select option { background: #1B1830; color: #ECEAF7; }
html[data-theme="dark"] .lbl { color: #D6D2EE; }
html[data-theme="dark"] .lbl small, html[data-theme="dark"] .kecil { color: #9C96BA; }
html[data-theme="dark"] .btn-ghost { background: rgba(255,255,255,.08); color: #C7BFFB; border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.16); }
html[data-theme="dark"] .btn-danger { color: #FCA5A5; border-color: rgba(248,113,113,.35); }
html[data-theme="dark"] .btn-danger:hover { background: rgba(220,38,38,.18); }
html[data-theme="dark"] .tablewrap { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .tbl th { background: rgba(255,255,255,.08); color: #E4E0F7; border-bottom-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .tbl td { border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .tbl tbody tr:hover { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .subtab { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #D6D2EE; }
html[data-theme="dark"] .subtab:hover { background: rgba(255,255,255,.14); color: #fff; }
html[data-theme="dark"] .subtab.on { background: linear-gradient(135deg,#4F46E5,#7C3AED); color: #fff; }
html[data-theme="dark"] .subtab .st-kod { background: rgba(255,255,255,.12); color: #C7C2E0; }
html[data-theme="dark"] .wnav-all { background: rgba(255,255,255,.08); color: #C7BFFB; border-color: rgba(255,255,255,.16); }
html[data-theme="dark"] .wnav-i { color: #D6D2EE; }
html[data-theme="dark"] .wnav-i:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .wnav-i.on { background: rgba(99,102,241,.22); box-shadow: inset 0 0 0 1.5px rgba(165,180,252,.45); color: #E9E6FF; }
html[data-theme="dark"] .wnav-grup, html[data-theme="dark"] .wnav-h { color: #9C96BA; }
html[data-theme="dark"] .wnav-ic.kod { background: rgba(255,255,255,.12); color: #C7C2E0; }
html[data-theme="dark"] .keg-row { border-top-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .keg-nama, html[data-theme="dark"] .tpl-judul, html[data-theme="dark"] .tpl-kod { color: #ECEAF7; }
html[data-theme="dark"] .tpl-kod, html[data-theme="dark"] .wnav-ic.kod { background: rgba(255,255,255,.12); color: #C7C2E0; }
html[data-theme="dark"] .chip { background: rgba(255,255,255,.12); color: #D6D2EE; }
html[data-theme="dark"] .chip-on { background: rgba(16,185,129,.22) !important; color: #6EE7B7 !important; border-color: rgba(110,231,183,.4); }
html[data-theme="dark"] .chip-asn { background: rgba(99,102,241,.22); color: #C7D2FE; border-color: rgba(165,180,252,.4); }
html[data-theme="dark"] .chip-nonasn { background: rgba(139,92,246,.22); color: #DDD6FE; border-color: rgba(196,181,253,.4); }
html[data-theme="dark"] .tag-docx { background: rgba(59,130,246,.18); color: #BFDBFE; border-color: rgba(147,197,253,.35); }
html[data-theme="dark"] .tag-xlsx { background: rgba(16,185,129,.18); color: #A7F3D0; border-color: rgba(110,231,183,.35); }
html[data-theme="dark"] .tag-count { background: rgba(139,92,246,.20); color: #DDD6FE; border-color: rgba(196,181,253,.35); }
html[data-theme="dark"] .tag-segera { background: rgba(245,158,11,.20); color: #FDE68A; border-color: rgba(253,230,138,.35); }
html[data-theme="dark"] .tpl-item, html[data-theme="dark"] .pindai-item, html[data-theme="dark"] .kal-bulan,
html[data-theme="dark"] .ap-blok { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .tpl-item.ada { background: rgba(16,185,129,.10); border-color: rgba(110,231,183,.35); }
html[data-theme="dark"] .tpl-item > summary:hover { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .kal-keg { color: #ECEAF7; }
html[data-theme="dark"] .kal-tgl, html[data-theme="dark"] .kal-tmp { color: #A8A2C6; }
html[data-theme="dark"] .flash-ok { background: rgba(6,95,70,.28); border-color: rgba(110,231,183,.4); color: #A7F3D0; }
html[data-theme="dark"] .flash-err { background: rgba(153,27,27,.28); border-color: rgba(252,165,165,.4); color: #FECACA; }
html[data-theme="dark"] .ok-line { color: #6EE7B7; }
html[data-theme="dark"] .warn-line { color: #FCD34D; }
html[data-theme="dark"] .empty, html[data-theme="dark"] .empty-cell { color: #9C96BA; }
html[data-theme="dark"] .foot { color: #8B86A8; }
html[data-theme="dark"] .pv-scroll { background: #1B1830; border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] #pv .docx, html[data-theme="dark"] .pv-xls { box-shadow: 0 10px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] .pv-xls table td, html[data-theme="dark"] .pv-tbl td { border-color: #3A3556; }
html[data-theme="dark"] .pv-xls, html[data-theme="dark"] .pv-empty2, html[data-theme="dark"] .docx-wrapper { background: #EDEBF7; }
html[data-theme="dark"] .pv-hint { background: rgba(245,158,11,.18); border-color: rgba(253,230,138,.4); color: #FDE68A; }
html[data-theme="dark"] .pv-err { background: rgba(153,27,27,.28); border-color: rgba(252,165,165,.4); color: #FECACA; }
html[data-theme="dark"] .pv-info { background: rgba(245,158,11,.18); border-color: rgba(253,230,138,.4); color: #FDE68A; }
html[data-theme="dark"] .pv-editbar { background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(180,83,9,.18));
  border-color: rgba(253,230,138,.45); color: #FDE68A; }
html[data-theme="dark"] .fmt-hint, html[data-theme="dark"] .token, html[data-theme="dark"] .tok code { color: #C7BFFB; }
html[data-theme="dark"] .tok { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .tok small { color: #9C96BA; }
html[data-theme="dark"] .jenis-opt { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .jenis-opt:hover { background: rgba(255,255,255,.10); }
html[data-theme="dark"] .jenis-opt.on { background: rgba(99,102,241,.20); border-color: #6366F1; }
html[data-theme="dark"] .bk-nama { color: #F2F0FB; }
html[data-theme="dark"] .biodata-kop { border-bottom-color: rgba(255,255,255,.24); }
html[data-theme="dark"] .req-item { border-top-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .barrow .bartrack, html[data-theme="dark"] .bulbar-wrap { background: rgba(255,255,255,.10); }
html[data-theme="dark"] .tbl-impor tr.baris-dup { background: rgba(153,27,27,.18); }
html[data-theme="dark"] .pg-form input, html[data-theme="dark"] .tarif-inp { background: rgba(16,14,26,.85); }
/* Tema kategori saat gelap: versi gelap dari oranye/hijau/biru */
html[data-theme="dark"] body.tema-A { background: #1F1509; }
html[data-theme="dark"] body.tema-B { background: #0D1A14; }
html[data-theme="dark"] body.tema-C { background: #0E1626; }
html[data-theme="dark"] body.tema-A .orb1 { background: #7C2D12; }
html[data-theme="dark"] body.tema-B .orb1 { background: #065F46; }
html[data-theme="dark"] body.tema-C .orb1 { background: #1E3A8A; }
html[data-theme="dark"] body.tema-A .glass, html[data-theme="dark"] body.tema-B .glass,
html[data-theme="dark"] body.tema-C .glass { background: rgba(35,31,54,.78); }
@media (max-width: 900px) {
  .tema-txt { display: none; }        /* sisakan ikon saja agar header tetap 1 baris */
  .tema-btn { padding: 7px 9px; }
}