/* Grid responsif */
.ref-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:720px){
  .ref-grid{ grid-template-columns:1fr 1fr; }
}

/* Kartu referensi (terang) */
.ref-card{
  display:flex; gap:12px; align-items:center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.ref-card:hover{
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
  box-shadow: 0 6px 20px rgba(10,146,208,.10);
}

/* Tile kiri (ikon/inisial) — tint brand lembut */
.ref-left{
  width:48px;height:48px;flex:0 0 48px;border-radius:12px;
  display:grid;place-items:center;font-weight:800;
  background: color-mix(in oklab, var(--brand) 10%, var(--card));
  color: var(--fg);
  border:1px solid var(--line);
}
/* Varian status opsional */
.ref-left.ok   { background: color-mix(in oklab, var(--ok)   15%, var(--card)); }
.ref-left.warn { background: color-mix(in oklab, var(--warn) 15%, var(--card)); }
.ref-left.bad  { background: color-mix(in oklab, var(--bad)  15%, var(--card)); }

.ref-main{ flex:1; min-width:0; }
.ref-title{ font-weight:700; }
.ref-sub{ margin-top:2px; word-break: break-word; color: var(--muted); }

.ref-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* Tombol*