:root{
  --bg:#eef1ef; --surface:#ffffff; --surface-alt:#e3e9e6; --border:#cfd8d4;
  --text:#132420; --text-muted:#5b6b65; --text-faint:#8b9993;
  --accent:#1f6f5c; --accent-strong:#154e41; --accent-soft:#dcece6; --accent-contrast:#ffffff;
  --good:#2f7d4f; --good-soft:#e3f3e8;
  --warn:#a3730a; --warn-soft:#faf1da;
  --bad:#b3261e; --bad-soft:#fbe4e2;
  --shadow: 0 1px 2px rgba(19,36,32,.06), 0 4px 14px rgba(19,36,32,.06);
  --radius: 12px;
  font-family:"IBM Plex Sans", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1715; --surface:#16211e; --surface-alt:#1c2925; --border:#2b3a35;
    --text:#e7f0ec; --text-muted:#a3b5ae; --text-faint:#71857e;
    --accent:#4fcfa8; --accent-strong:#7ee2bf; --accent-soft:#173229; --accent-contrast:#0b1512;
    --good:#5bc98a; --good-soft:#15281c;
    --warn:#e0a63c; --warn-soft:#2e2410;
    --bad:#e5726b; --bad-soft:#341715;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1715; --surface:#16211e; --surface-alt:#1c2925; --border:#2b3a35;
  --text:#e7f0ec; --text-muted:#a3b5ae; --text-faint:#71857e;
  --accent:#4fcfa8; --accent-strong:#7ee2bf; --accent-soft:#173229; --accent-contrast:#0b1512;
  --good:#5bc98a; --good-soft:#15281c;
  --warn:#e0a63c; --warn-soft:#2e2410;
  --bad:#e5726b; --bad-soft:#341715;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{background:var(--bg); color:var(--text); margin:0;}
.wrap{max-width:1180px; margin:0 auto; padding-inline:20px;}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}
.eyebrow{font-family:"Barlow Condensed",sans-serif; font-weight:600; letter-spacing:.09em; text-transform:uppercase; font-size:12px; color:var(--text-muted);}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif; font-weight:700; margin:0;}
button{font-family:inherit; cursor:pointer;}
button:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.topbar{position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow);}
.topbar-inner{display:flex; align-items:center; gap:18px; padding-block:14px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
.brand-mark{width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--accent-contrast); display:flex; align-items:center; justify-content:center; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:17px; flex:none;}
.brand-text h1{font-size:19px; line-height:1.1;}
.stat{display:flex; flex-direction:column; align-items:flex-end; line-height:1.15;}
.stat b{font-family:"IBM Plex Mono",monospace; font-size:18px;}
.stat span{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em;}
.btn{border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); padding:9px 14px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px;}
/* .btn's own display:inline-flex (an author rule) beats the UA stylesheet's
   [hidden]{display:none} at equal specificity — bug found via testing:
   batalBtn/pushBtn stayed visibly rendered even with the hidden property
   set. This rule has higher specificity than plain .btn, so it wins. */
.btn[hidden]{display:none;}
.btn:hover{border-color:var(--accent);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast);}
.btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong);}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text-muted);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn[data-done="true"]{background:var(--good-soft); border-color:var(--good); color:var(--good);}

.tabs{display:flex; gap:4px; background:var(--surface-alt); padding:4px; border-radius:11px; border:1px solid var(--border); width:fit-content;}
.tab-btn{border:none; background:transparent; color:var(--text-muted); font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:8px;}
.tab-btn[aria-selected="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}

.intro{padding-block:16px 6px;}
.intro p{margin:6px 0 0; color:var(--text-muted); font-size:14px; max-width:74ch;}
.legend{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.legend-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text-muted);}
.legend-dot{width:8px; height:8px; border-radius:50%;}
.bj-chip{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.03em;}
.bj-jasa{background:var(--accent-soft); color:var(--accent-strong);}
.bj-barang{background:var(--warn-soft); color:var(--warn);}
.bj-ambigu{background:var(--surface-alt); color:var(--text-muted); border:1px solid var(--border);}

.search-row{display:flex; gap:10px; margin-block:14px; flex-wrap:wrap;}
.search-row input[type="search"]{flex:1; min-width:220px; padding:10px 14px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14px;}

section[hidden]{display:none!important;}
.stack{display:flex; flex-direction:column; gap:16px; padding-block:6px 40px;}
.loading, .empty{color:var(--text-muted); padding:30px 4px; font-size:14px;}

.code-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.code-card[data-done="true"]{opacity:.72;}
.code-card-head{display:flex; align-items:flex-start; gap:14px; padding:16px 18px; flex-wrap:wrap; border-bottom:1px solid var(--border);}
.code-id{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--accent-strong); background:var(--accent-soft); padding:2px 8px; border-radius:6px; width:fit-content;}
.code-title{font-size:20px; margin-top:6px;}
.code-hier{font-size:12.5px; color:var(--text-muted); margin-top:4px;}
.code-count{font-size:12px; color:var(--text-muted); margin-top:4px;}
.head-right{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
.level-picker{display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.level-picker button{border:none; background:var(--surface); color:var(--text-muted); font-size:11.5px; font-weight:600; padding:6px 10px; text-transform:uppercase; letter-spacing:.04em; border-right:1px solid var(--border);}
.level-picker button:last-child{border-right:none;}
.level-picker button[aria-pressed="true"]{background:var(--accent); color:var(--accent-contrast);}
.ganti-kode-wrap{position:relative; width:100%;}
.btn-ganti-kode{font-size:11.5px; padding:6px 10px; width:100%; justify-content:center; border:1px dashed var(--border);}
.ganti-kode-panel{position:absolute; right:0; top:calc(100% + 6px); width:340px; max-width:80vw; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.15);}
.ganti-kode-input-row{display:flex; gap:6px; margin-bottom:8px;}
.ganti-kode-input-row input{flex:1; border:1px solid var(--border); border-radius:8px; padding:7px 9px; font-size:13px; background:var(--surface); color:var(--text);}
.ganti-kode-results{max-height:280px; overflow-y:auto;}
.ganti-kode-row{flex-wrap:wrap;}
.ganti-kode-row .rr-title{flex-basis:100%;}
.override-chip{display:flex; align-items:center; gap:6px; font-size:11.5px; padding:5px 9px; border-radius:6px; background:var(--accent-soft); color:var(--accent-strong); white-space:nowrap;}
.btn-clear-override{border:none; background:none; color:inherit; cursor:pointer; font-weight:700; padding:0 2px; line-height:1;}
.cand-row-custom{cursor:default;}
.cand-row-custom:hover{border-color:var(--border);}
.cand-row-custom[data-active="true"]{border-color:var(--accent); background:var(--accent-soft);}
.custom-cand-label{font-size:12.5px; color:var(--text-muted); margin-bottom:8px;}
.code-card-body{padding:6px 10px; max-height:360px; overflow-y:auto;}
.title-row{display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:8px;}
.title-row:hover{background:var(--surface-alt);}
.title-row input[type="checkbox"]{width:17px; height:17px; accent-color:var(--accent); flex:none;}
.title-text{flex:1; font-size:14px; line-height:1.4;}
.title-text.excluded{color:var(--text-faint); text-decoration:line-through;}
.score-chip{font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding:3px 8px; border-radius:6px; flex:none;}
.score-hi{background:var(--good-soft); color:var(--good);}
.score-mid{background:var(--warn-soft); color:var(--warn);}
.score-lo{background:var(--bad-soft); color:var(--bad);}
.agree-chip{font-size:11px; padding:3px 8px; border-radius:6px; flex:none; white-space:nowrap;}
.agree-yes{background:var(--good-soft); color:var(--good);}
.agree-no{background:var(--bad-soft); color:var(--bad);}
.agree-solo{background:var(--surface-alt); color:var(--text-muted);}
.algo-code-chip{font-family:"IBM Plex Mono",monospace; font-size:11px; padding:3px 8px; border-radius:6px; flex:none; white-space:nowrap; background:var(--surface-alt); color:var(--text-muted); border:1px solid var(--border);}
.code-card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; background:var(--surface-alt); flex-wrap:wrap;}
.selcount{font-size:12.5px; color:var(--text-muted);}
.select-all-row{border-bottom:1px solid var(--border); margin-bottom:2px;}
.select-all-row .title-text{font-weight:700;}
.btn-reject-group{background:transparent; border-color:var(--bad); color:var(--bad);}
.btn-reject-group:hover{background:var(--bad-soft);}

.cluster-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.cluster-card[data-done="true"]{opacity:.72;}
.cluster-card[data-done="true"] .cluster-body{pointer-events:none;}
.btn-batal{background:transparent; border-color:var(--bad); color:var(--bad);}
.btn-batal:hover{background:var(--bad-soft);}
.cluster-head{padding:16px 18px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.cluster-head h3{font-size:19px;}
.cluster-badge{font-size:12px; color:var(--text-muted); background:var(--surface-alt); border:1px solid var(--border); padding:3px 10px; border-radius:999px;}
.cluster-body{display:grid; grid-template-columns:1.15fr 1fr;}
@media (max-width:760px){.cluster-body{grid-template-columns:1fr;}}
.cluster-col{padding:14px 18px; max-height:420px; overflow-y:auto;}
.cluster-col + .cluster-col{border-left:1px solid var(--border);}
@media (max-width:760px){.cluster-col + .cluster-col{border-left:none; border-top:1px solid var(--border);}}
.col-label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); font-weight:600; margin-bottom:8px; position:sticky; top:-14px; background:var(--surface); padding-block:4px;}
.col-label.select-all-row{display:flex; align-items:center; gap:8px;}
.col-label.select-all-row input[type="checkbox"]{width:14px; height:14px; accent-color:var(--accent); flex:none;}
.member-row{display:flex; align-items:flex-start; gap:10px; padding:7px 4px;}
.member-row input[type="checkbox"]{margin-top:3px; width:16px; height:16px; accent-color:var(--accent); flex:none;}
.member-title{font-size:13.5px; line-height:1.4;}
.member-title.excluded{color:var(--text-faint); text-decoration:line-through;}

.cand-row{border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:9px; cursor:pointer;}
.cand-row:hover{border-color:var(--accent);}
.cand-row[data-active="true"]{border-color:var(--accent); background:var(--accent-soft);}
.cand-top{display:flex; align-items:center; gap:8px;}
.cand-top input[type="radio"]{accent-color:var(--accent); width:15px; height:15px; flex:none;}
.cand-name{font-size:14px; font-weight:600; flex:1;}
.cand-score{font-family:"IBM Plex Mono",monospace; font-size:11px;}
.level-chips{display:flex; gap:6px; margin-top:8px; margin-left:23px; flex-wrap:wrap;}
.level-chip{font-size:10.5px; font-family:"IBM Plex Mono",monospace; padding:3px 7px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted);}
.level-chip[data-chosen="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast);}
.level-chip-label{opacity:.7; margin-right:3px;}

.cluster-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; background:var(--surface-alt); flex-wrap:wrap;}

.modal-backdrop{position:fixed; inset:0; background:rgba(10,16,14,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50;}
.modal{background:var(--surface); border-radius:14px; max-width:520px; width:100%; box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden;}
.modal-head{padding:18px 20px 4px;}
.modal-body{padding:6px 20px 4px; color:var(--text-muted); font-size:13.5px; line-height:1.5;}
.commit-box{margin:14px 20px; background:var(--surface-alt); border:1px solid var(--border); border-radius:10px; padding:12px 14px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--text-muted); white-space:pre-wrap;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 20px;}

.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); padding:11px 18px; border-radius:10px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); z-index:60; display:flex; align-items:center; gap:8px;}
.toast-good{background:var(--good-soft); color:var(--good); border:1px solid var(--good);}
.toast-bad{background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad);}

.footnote{color:var(--text-faint); font-size:12px; padding-block:6px 30px; max-width:70ch;}

/* ================== app shell / sidebar nav ================== */
.app-shell{display:flex; align-items:flex-start; max-width:1400px; margin:0 auto;}
.sidenav{width:230px; flex:none; padding:16px 12px 40px; position:sticky; top:57px; height:calc(100vh - 57px); overflow-y:auto;}
.sidenav-group{margin-bottom:4px;}
.sidenav-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:700; padding:14px 10px 6px;}
.nav-btn{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:transparent; color:var(--text-muted); font-size:13.5px; font-weight:600; padding:9px 10px; border-radius:9px; margin-bottom:2px;}
.nav-btn:hover{background:var(--surface-alt); color:var(--text);}
.nav-btn[aria-current="true"]{background:var(--accent-soft); color:var(--accent-strong);}
.nav-icon{width:18px; text-align:center; flex:none;}
.nav-subbtn{padding-left:34px; font-size:12.5px;}
.main-content{flex:1; min-width:0; padding: 0 24px 40px;}
@media (max-width:820px){
  .app-shell{flex-direction:column;}
  .sidenav{position:static; width:100%; height:auto; display:flex; flex-wrap:wrap; gap:4px; padding:12px 16px; border-bottom:1px solid var(--border);}
  .sidenav-label{display:none;}
  .nav-btn{width:auto;}
  .nav-subbtn{padding-left:10px;}
  .main-content{padding:0 16px 40px;}
}
.page[hidden]{display:none!important;}
.page-head{padding-block:20px 6px;}
.page-head p{margin:6px 0 0; color:var(--text-muted); font-size:14px; max-width:74ch;}

/* ================== dashboard ================== */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-block:18px;}
.stat-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;}
.stat-tile .num{font-family:"IBM Plex Mono",monospace; font-size:28px; font-weight:600;}
.stat-tile .label{font-size:12px; color:var(--text-muted); margin-top:4px;}
.progress-bar{height:8px; border-radius:99px; background:var(--surface-alt); overflow:hidden; margin-top:10px;}
.progress-bar > div{height:100%; background:var(--accent);}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px;}
.panel h3{font-size:16px; margin-bottom:10px;}
.kv-row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border); font-size:13.5px;}
.kv-row:last-child{border-bottom:none;}
.kv-row .k{color:var(--text-muted);}
.api-client-row{border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:10px;}
.api-client-row[data-active="false"]{opacity:.6;}
.api-client-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.api-client-name{font-weight:700;}
.api-client-ips{width:100%; min-height:50px; padding:6px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:"IBM Plex Mono",monospace; font-size:12.5px; margin-bottom:6px;}
.api-client-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ================== manual search ================== */
.search-box{display:flex; gap:10px; margin-bottom:16px;}
.search-box input{flex:1; padding:12px 14px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14px;}
.search-toggles{display:flex; gap:16px; margin-bottom:14px; font-size:12.5px; color:var(--text-muted);}
.search-toggles label{display:flex; align-items:center; gap:6px;}
.result-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; background:var(--surface);}
.result-row .rr-title{flex:1; font-size:14px; font-weight:600;}
.result-row .rr-hier{font-size:12px; color:var(--text-muted); display:block; margin-top:2px; font-weight:400;}

/* ================== history table ================== */
.history-table{width:100%; border-collapse:collapse; font-size:13px;}
.history-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); padding:8px 10px; border-bottom:1px solid var(--border);}
.history-table td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
.history-table tr:last-child td{border-bottom:none;}
.pill{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--surface-alt); border:1px solid var(--border);}
.link-btn{background:none; border:none; color:var(--bad); font-size:12px; font-weight:600; cursor:pointer; padding:4px 6px;}
.link-btn:hover{text-decoration:underline;}
.table-wrap{overflow-x:auto;}

/* ================== browse tree ================== */
.browse-cols{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;}
@media (max-width:900px){.browse-cols{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.browse-cols{grid-template-columns:1fr;}}
.browse-col{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); max-height:520px; overflow-y:auto;}
.browse-col-head{position:sticky; top:0; background:var(--surface); padding:10px 12px; border-bottom:1px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:700;}
.browse-item{display:block; width:100%; text-align:left; border:none; background:none; padding:9px 12px; font-size:13px; color:var(--text); border-bottom:1px solid var(--border);}
.browse-item:hover{background:var(--surface-alt);}
.browse-item[aria-current="true"]{background:var(--accent-soft); color:var(--accent-strong); font-weight:600;}
.browse-item .bi-count{float:right; color:var(--text-faint); font-size:11px;}

/* ================== settings ================== */
.status-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px;}
.status-dot.ok{background:var(--good);}
.status-dot.bad{background:var(--bad);}

/* ================== login ================== */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:32px 30px; width:100%; max-width:380px;}
.login-card .field label{display:block; margin-bottom:5px;}
.login-card .field input{width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text);}
.login-error{background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad); padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:14px;}
.login-hint{font-size:12px; color:var(--text-muted); margin-top:18px; line-height:1.5; text-align:center;}

/* ================== halaman pengguna (cari kode) ================== */
.pengguna-card{padding:20px 22px;}
.pengguna-card-head{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.pengguna-deskripsi{font-size:19px; margin-bottom:4px;}
.pengguna-original{font-size:12.5px; color:var(--text-faint); margin-bottom:8px;}
.pengguna-penjelasan{font-size:14.5px; line-height:1.6; color:var(--text); margin:8px 0;}
.pengguna-en-details{margin-top:6px;}
.pengguna-en-details summary{font-size:12.5px; color:var(--accent-strong); cursor:pointer; font-weight:600;}
.pengguna-hier{font-size:12px; color:var(--text-muted); margin-top:12px; padding-top:10px; border-top:1px dashed var(--border);}

.rr-actions{margin-left:auto; display:flex; gap:8px; flex:none;}
.btn-reject{border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-muted); padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer;}
.btn-reject:hover{border-color:var(--bad); color:var(--bad);}
.btn-reject:disabled{opacity:.6; cursor:default; border-color:var(--border); color:var(--text-faint);}
.btn-save-manual{border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-contrast); padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer;}
.btn-save-manual:hover{opacity:.9;}
.btn-save-manual:disabled{opacity:.6; cursor:default;}