/* Halaman index — sentuhan khusus tema terang */

.wrap{max-width:980px;margin:40px auto;padding:0 20px}
.lead{color:var(--muted);margin:0 0 18px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
input,select{min-width:220px}
input{min-width:320px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.pane{padding:14px}

/* Status card */
.status{
  margin:18px 0 0;
  padding:14px 16px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
}
.status .big{font-weight:800}

.pill{
  display:inline-block;
  background: color-mix(in oklab, var(--brand) 10%, var(--card));
  border:1px solid var(--line);
  color: var(--fg);
  padding:2px 10px;
  border-radius:999px;
  font-size:13px
}

.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.meta{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 0}

/* Hint & tombol saran */
.hint{
  margin-top:14px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
  border-radius: calc(var(--radius) - 6px);
}
.hint {
  border:1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  border-radius:999px;
  padding:6px 10px;
  margin-left:10px;
  cursor:pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.hint {
  background: color-mix(in oklab, var(--brand) 10%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
  box-shadow: 0 2px 10px rgba(10,146,208,.12);
}

/* Judul & timeline */
h3{margin:26px 0 10px}
ul.timeline{list-style:none;margin:0;padding:0}
ul.timeline li{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 14px;
  border-bottom:1px dashed var(--line)
}
ul.timeline li:last-child{border-bottom:none}
.time{min-width:220px}
.loc{color:var(--muted)}

/* Grid */
.grid{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:18px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

.history{padding:14px}
.history[hidden]{display:none!important}

/* Chip tag */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
  border-radius:999px;
  padding:6px 10px;
  margin:6px 6px 0 0;
  cursor:pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.chip:hover{
  background: color-mix(in oklab, var(--brand) 12%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
  box-shadow: 0 2px 10px rgba(10,146,208,.10);
}
.chip b.bad{ color: v