.page-head{max-width:70ch;margin-bottom:8px;}
.page-head h1{font-size:clamp(24px,3.2vw,32px);margin-top:8px;}
.page-head p{color:var(--ink-soft);margin-top:10px;font-size:15px;}

/* stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:32px;}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;}
.stat-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tint,var(--ink-faint));}
.stat-tile b{display:block;font-family:var(--font-display);font-size:28px;font-variant-numeric:tabular-nums;color:var(--ink);}
.stat-tile span{font-size:12.5px;color:var(--ink-soft);}
.stat-tile.t-total{--tint:var(--primary-soft);}
.stat-tile.t-ok{--tint:var(--success);}
.stat-tile.t-warn{--tint:var(--warning);}
.stat-tile.t-critical{--tint:var(--critical);}
.stat-tile.t-pending{--tint:var(--ink-faint);}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.search-box{position:relative;flex:2 1 240px;min-width:200px;}
.search-box svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-faint);pointer-events:none;}
.search-box input{
  width:100%;padding:10px 14px 10px 38px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:14px;
}
.search-box input::placeholder{color:var(--ink-faint);}
select{
  flex:1 1 160px;min-width:150px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink);font-size:14px;
}

/* dashboard grid */
.dash{display:grid;grid-template-columns:400px 1fr;gap:24px;margin-top:28px;align-items:start;}
@media (max-width:900px){ .dash{grid-template-columns:1fr;} }

.list-count{font-size:13px;color:var(--ink-faint);margin-bottom:10px;}
.node-list{display:flex;flex-direction:column;gap:8px;}
.node-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;
  cursor:pointer;transition:border-color .15s, background .15s;
}
.node-row:hover{border-color:var(--primary-soft);}
.node-row.active{border-color:var(--primary);background:var(--primary-wash);}
.node-row .icon{width:36px;height:36px;flex-shrink:0;border-radius:9px;background:var(--surface-alt);color:var(--primary);display:flex;align-items:center;justify-content:center;}
.node-row .icon svg{width:18px;height:18px;}
.node-row .info{flex:1;min-width:0;}
.node-row .info .nm{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.node-row .info .mt{font-size:12.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* detail panel */
.detail{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.detail-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--border);}
.detail-head h2{font-size:21px;}
.detail-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:13px;color:var(--ink-soft);}
.detail-meta b{color:var(--ink-faint);font-weight:600;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-right:5px;}
.detail-section{margin-top:24px;}
.detail-section h3{font-size:14.5px;font-family:var(--font-body);font-weight:700;margin-bottom:14px;}

.criteria-list{display:flex;flex-direction:column;gap:10px;}
.criteria-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--surface-alt);}
.criteria-item .c-icon{width:20px;height:20px;flex-shrink:0;margin-top:1px;}
.criteria-item .c-icon.lulus{color:var(--success);}
.criteria-item .c-icon.tinjau{color:var(--warning);}
.criteria-item .c-icon.gagal{color:var(--critical);}
.criteria-item .c-icon.belum{color:var(--ink-faint);}
.criteria-item .c-text{font-size:14px;color:var(--ink);}
.criteria-item .c-label{display:block;font-size:11.5px;margin-top:2px;color:var(--ink-faint);}

.timeline{position:relative;display:flex;flex-direction:column;gap:20px;padding-left:20px;}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--border);}
.t-item{position:relative;}
.t-item::before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--tint,var(--ink-faint));border:2px solid var(--surface);}
.t-item.r-ok{--tint:var(--success);} .t-item.r-warn{--tint:var(--warning);} .t-item.r-critical{--tint:var(--critical);} .t-item.r-pending{--tint:var(--ink-faint);}
.t-item .t-top{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.t-item .t-date{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.t-item .t-result{font-size:13.5px;font-weight:700;}
.t-item .t-auditor{font-size:12.5px;color:var(--ink-faint);}
.t-item .t-note{font-size:13.5px;color:var(--ink-soft);margin-top:4px;}