/* Gaya: simpel seperti aryadzul.pages.dev — putih, Arial, tombol abu-abu datar. */
:root{
  --bg:#fff; --ink:#222; --muted:#666; --faint:#999;
  --line:#ccc; --box:#f5f5f5;
  --btn:#eee; --btn-b:#999; --btn-h:#ddd; --btn-a:#d4d4d4;
  --dark:#555; --dark-b:#333; --dark-h:#444;
  --link:#1a5fb4; --green:#2e7d32; --red:#c62828;
}
*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:20px auto;max-width:900px;padding:0 12px;background:var(--bg);color:var(--ink);
  font-family:Arial,sans-serif;font-size:14px}
.wrap{max-width:none;margin:0;padding:0}

.topbar{display:flex;justify-content:flex-end;margin-bottom:12px}
.status-pill{display:inline-flex;align-items:center;gap:8px;background:var(--box);
  border:1px solid var(--btn-b);padding:6px 12px;font-size:13px}
.status-pill .dot{width:10px;height:10px;border-radius:50%;background:#9ca3af}
.status-pill.ok .dot{background:var(--green)}
.status-pill.warn .dot{background:#d97706}

.card{border:1px solid var(--line);background:#fff;margin-bottom:16px}
.card-head{display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:10px 14px;background:var(--box);border:none;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:bold;font-family:inherit;cursor:pointer;color:var(--ink);text-align:left}
.card-head.static{cursor:default}
.card-head .chev{color:var(--muted);font-weight:normal}
.card-body{padding:12px 14px}
.card-body.collapsed{display:none}

.field{margin-bottom:12px}
.field.short input{max-width:170px}
.field label{display:block;font-weight:bold;margin-bottom:4px;font-size:14px}
.field label small{font-weight:normal;color:var(--muted)}
.hint{color:var(--muted);font-size:12px;display:block;margin-top:4px;line-height:1.5}

input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;padding:8px;border:1px solid var(--btn-b);font-size:15px;font-family:inherit;
  color:var(--ink);background:#fff;box-sizing:border-box}
input:focus,select:focus,textarea:focus{outline:2px solid #bbb;border-color:#666}
textarea{resize:vertical}

.row{display:flex;gap:8px;align-items:center}
.row input{flex:1;min-width:0}
.row select{flex:1;min-width:0}
.row .btn{flex:0 0 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 20px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}

.btn{background:var(--btn);border:1px solid var(--btn-b);padding:8px 18px;font-size:15px;
  cursor:pointer;color:var(--ink);font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--btn-h)}
.btn.primary{background:var(--dark);border-color:var(--dark-b);color:#fff;font-weight:bold}
.btn.primary:hover{background:var(--dark-h)}
.btn.ghost{background:#fff}
.btn.ghost:hover{background:var(--box)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.linklike{background:none;border:none;color:var(--link);cursor:pointer;font-size:13px;font-family:inherit;padding:6px 0}
.linklike:hover{text-decoration:underline}
.checkbox{display:flex!important;align-items:center;gap:8px;font-weight:normal!important;cursor:pointer}
.checkbox input{width:auto}

.msg{margin-top:10px;padding:10px 12px;font-size:13px;border:1px solid var(--line)}
.msg.ok{background:#f2f9f2;color:var(--green);border-color:#a3c9a3}
.msg.err{background:#fdf2f2;color:var(--red);border-color:#e0aaaa}

.prog-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.progbar{background:#e5e5e5;height:10px;overflow:hidden;margin-bottom:10px}
#progFill{height:100%;width:0;background:#888;transition:width .3s}
.logbox{background:#222;color:#d1d5db;padding:10px 12px;
  font-family:Consolas,monospace;font-size:12px;max-height:180px;overflow-y:auto;line-height:1.6}
.logbox .t{color:#888}

.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
table,th,td{border:1px solid var(--line)}
th,td{padding:6px 8px;text-align:left;font-size:14px}
thead th{background:var(--box);font-weight:bold;white-space:nowrap;user-select:none}
thead th[data-sort]{cursor:pointer}
thead th.num{text-align:right}
tbody tr:nth-child(even){background:#f9f9f9}
tbody tr:hover{background:#f0f0f0}
tbody td{vertical-align:top}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sortarw{font-size:10px;color:var(--muted);margin-left:3px}
.kd{font-weight:bold}
.intent-tag{display:inline-block;border:1px solid var(--btn-b);background:var(--box);
  padding:0 5px;font-size:11px;font-weight:bold;margin-right:3px}
.sfc{display:inline-block;border:1px solid var(--btn-b);background:var(--box);padding:1px 8px;font-size:12px}

.pager{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pager select{width:auto}
#pgInfo{color:var(--muted);font-size:13px}

.histlist{display:flex;flex-direction:column;gap:8px}
.hist{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);flex-wrap:wrap}
.hist .kw{font-weight:bold}
.hist .meta{color:var(--muted);font-size:12px}
.hist .spacer{flex:1}
.badge{font-size:11px;padding:2px 9px;border:1px solid var(--btn-b);font-weight:bold;background:var(--box)}

.foot{text-align:center;font-size:12px;color:var(--faint);margin:32px 0 12px}

/* --- tab & pill ala menu situs --- */
.tabs{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
.tab{background:var(--btn);border:1px solid var(--btn-b);padding:8px 20px;font-size:14px;
  cursor:pointer;font-family:inherit;color:var(--ink)}
.tab:hover{background:var(--btn-h)}
.tab.active{background:var(--btn-a);font-weight:bold}
.moderow{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.modepills{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px;flex:1}
.mpill{background:var(--btn);border:1px solid var(--btn-b);padding:6px 14px;font-size:13px;
  cursor:pointer;font-family:inherit;color:var(--ink)}
.mpill:hover{background:var(--btn-h)}
.mpill.active{background:var(--btn-a);font-weight:bold}

/* --- filter bar --- */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:20}
.fdrop{position:relative;min-width:0}
.fbtn{background:var(--btn);border:1px solid var(--btn-b);padding:8px 12px;font-size:13px;
  cursor:pointer;font-family:inherit;color:var(--ink);display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.fbtn:hover{background:var(--btn-h)}
.fbtn.active{background:var(--btn-a);font-weight:bold}
.fbtn .chev{font-size:10px;color:#666}
.fpanel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:#fff;
  border:1px solid var(--btn-b);padding:12px;min-width:240px}
.fpanel.open{display:block}
@media(min-width:641px){.fpanel.ralign{left:auto;right:0}}
.plist{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;max-height:260px;overflow-y:auto}
.plist button{background:none;border:none;text-align:left;padding:7px 9px;font-size:13px;
  cursor:pointer;color:var(--ink);font-family:inherit;white-space:nowrap}
.plist button:hover{background:var(--box)}
.plist button.sel{background:#e0e0e0;font-weight:bold}
.crow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.crow span{font-size:12px;color:var(--muted);white-space:nowrap}
.crow input{width:76px;padding:6px 8px;font-size:13px}
.fapply{width:100%}
.fpanel .checkbox{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;cursor:pointer}
.statline{font-size:14px;color:#333;line-height:1.6}
.statline b{color:#111}

/* --- kartu pencarian --- */
.kmt-title{font-size:20px;margin:0 0 10px;color:#111;border-bottom:2px solid #ddd;padding-bottom:6px}
.kmt-title #titleKw{color:var(--muted);font-weight:normal}
.dbline{display:flex;align-items:center;gap:16px;font-size:13px;flex-wrap:wrap}
.dbline select{width:auto;min-width:170px;padding:6px 8px;font-size:13px}
.srow{display:flex;gap:8px}
.kwrap{position:relative;flex:1;display:flex;min-width:0}
.kwrap input{flex:1;padding-right:32px;min-width:0}
.kwclear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  font-size:18px;color:#999;cursor:pointer;line-height:1;padding:2px 6px;font-family:inherit}
.kwclear:hover{color:#111}
.statsbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.statbtns{display:flex;align-items:center;gap:8px}
.resmain{display:flex;gap:16px;align-items:flex-start}
.resright{flex:1;min-width:0}

/* --- HP: rapat & compact --- */
@media(max-width:640px){
  .fpanel{position:fixed;left:12px;right:12px;bottom:12px;top:auto;max-height:70vh;overflow-y:auto}
  .card-body{padding:10px 12px}
  .card-head{padding:10px 12px;font-size:14px}
  .kmt-title{font-size:18px}
  .srow{flex-wrap:wrap}
  .kwrap{flex:1 1 100%}
  .srow .btn.primary{flex:1 1 auto;padding:10px 16px}
  .tabs{overflow-x:auto;padding-bottom:2px;flex-wrap:nowrap}
  .tab{flex:0 0 auto;padding:7px 16px;font-size:13px}
  .modepills{flex:1 1 100%;margin-bottom:8px}
  .mpill{padding:6px 12px;font-size:12.5px}
  .filterbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fbtn{width:100%;max-width:none;justify-content:space-between;font-size:12.5px;padding:8px 10px}
  table{font-size:12.5px}
  th,td{padding:6px;font-size:12.5px}
  #resTable th:nth-child(7),#resTable td:nth-child(7){display:none}
  .statline{font-size:13px}
  .pager{gap:8px}
  .hist{padding:8px 10px;gap:8px}
  input[type=text],input[type=password],input[type=number],select,textarea{font-size:16px}
  .dbline select{font-size:14px}
}