* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; max-width: 960px; margin: 0 auto; padding: 1rem; color: #222; }
h1 { margin-bottom: 1rem; }
h2 { margin-bottom: 0.75rem; }
h3 { margin-bottom: 0.5rem; }
h4 { margin: 0.75rem 0 0.5rem; }
label { display: block; margin-bottom: 0.25rem; font-weight: 600; }
input, textarea, select { display: block; width: 100%; padding: 0.5rem; margin-bottom: 0.75rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: inherit; }
button { padding: 0.5rem 1rem; border: none; border-radius: 4px; background: #2563eb; color: white; cursor: pointer; font-size: 1rem; font-family: inherit; margin-right: 0.5rem; margin-bottom: 0.5rem; }
button:hover { background: #1d4ed8; }
button:disabled { background: #9ca3af; cursor: not-allowed; }
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); outline: none; }
button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 2px; }
button.danger { background: #dc2626; }
button.danger:hover { background: #b91c1c; }
button.secondary { background: #6b7280; }
button.secondary:hover { background: #4b5563; }
.error { color: #dc2626; }
.warning { color: #d97706; background: #fffbeb; border: 1px solid #f59e0b; padding: 0.75rem; border-radius: 4px; }
.success { color: #059669; }
pre { background: #f3f4f6; padding: 0.75rem; border-radius: 4px; overflow-x: auto; font-size: 0.875rem; margin-bottom: 0.75rem; }
code { background: #f3f4f6; padding: 0.125rem 0.25rem; border-radius: 2px; font-size: 0.875rem; }
nav { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
nav button { background: #e5e7eb; color: #374151; }
nav button:hover { background: #d1d5db; }
nav button.active { background: #2563eb; color: white; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #e5e7eb; }
th { font-weight: 600; background: #f9fafb; }
.card { border: 1px solid #e5e7eb; border-radius: 6px; padding: 1rem; margin-bottom: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.locked { background: #f3f4f6; border-style: dashed; opacity: 0.6; }
.chain-ok { color: #059669; }
.chain-broken { color: #dc2626; font-weight: 700; }
.card.selected-grant { background: #dbeafe; border-color: #2563eb; outline: 2px solid #2563eb; }
.card.selected-revoke { background: #fee2e2; border-color: #dc2626; outline: 2px solid #dc2626; }
a { color: #2563eb; }
hr { margin: 1rem 0; border: none; border-top: 1px solid #e5e7eb; }
.meta-field { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.meta-field input { flex: 1; margin-bottom: 0; }
.timestamp { color: #595f6a; font-size: 0.875rem; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: white; border-radius: 8px; padding: 1.5rem; max-width: 480px; width: 90%; box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
.modal-body { margin-bottom: 1rem; line-height: 1.5; white-space: pre-wrap; }
.modal-body label { margin-bottom: 0.5rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.modal-actions button { margin: 0; }
.modal-input { margin-top: 0.5rem; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.split-pane { display: flex; gap: 2rem; }
.split-pane > div { flex: 1; }
.card.clickable { cursor: pointer; }
.card strong { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.copy-id-btn { font-size: 0.75rem; padding: 0.2rem 0.5rem; margin: 0; vertical-align: middle; }
.graph-canvas { border: 1px solid #e5e7eb; margin: 1rem 0; }
.edge-arrow { padding: 0.5rem; }
.skip-link { position: absolute; left: -9999px; top: auto; z-index: 9999; background: #2563eb; color: white; padding: 0.5rem 1rem; border-radius: 4px; text-decoration: none; font-weight: 600; }
.skip-link:focus { position: fixed; top: 0.5rem; left: 0.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  body { padding: 0.5rem; }
  nav { gap: 0.25rem; }
  nav button { padding: 0.4rem 0.6rem; font-size: 0.875rem; }
  .split-pane { flex-direction: column; gap: 1rem; }
  .meta-field { flex-wrap: wrap; }
  .header { flex-wrap: wrap; gap: 0.5rem; }
  table { font-size: 0.875rem; }
  th, td { padding: 0.35rem; }
  .graph-canvas { max-width: 100%; height: auto; }
}