#client-multi-role-builder[hidden],
#client-cancel-extra-role[hidden] { display:none!important; }
.client-role-hint { color:var(--text-muted);font-size:13px;line-height:1.6; }
.client-role-actions { display:flex;flex-wrap:wrap;gap:8px;margin:14px 0; }
.client-role-actions button,
.client-role-card button {
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);border-radius:10px;padding:9px 12px;
  color:var(--text);background:var(--bg-card);
}
.client-role-actions .client-role-add {
  color:var(--blue,#2563eb);background:var(--blue-light,#eff6ff);
}
.client-role-actions .client-role-danger,
.client-role-card .client-role-danger {
  color:#b91c1c;background:var(--red-light,#fee2e2);
  border-color:rgba(239,68,68,.35);
}
.client-role-actions .client-role-danger:hover:not(:disabled),
.client-role-card .client-role-danger:hover:not(:disabled) {
  color:white;background:#b91c1c;border-color:#b91c1c;
}
.client-role-actions button:focus-visible,
.client-role-card button:focus-visible {
  outline:3px solid var(--blue,#3b82f6);outline-offset:3px;
}
.client-role-actions button:disabled,
.client-role-card button:disabled { opacity:.55;cursor:wait; }
.client-role-card {
  border:1px solid var(--border);border-radius:12px;
  padding:14px;margin-top:10px;background:var(--bg-card);
}
.client-role-card strong { color:var(--text);font-size:14px; }
.client-role-card p,.client-role-preview-detail {
  font-size:12px;line-height:1.65;color:var(--text-muted);
  margin:7px 0;overflow-wrap:anywhere;
}
.client-role-discard-dialog {
  width:min(420px,calc(100vw - 32px));max-height:85vh;overflow:auto;
  margin:auto;padding:24px;border:1px solid var(--border);
  border-radius:18px;background:var(--bg-card);color:var(--text);
  box-shadow:0 20px 60px rgba(15,31,61,.25);font-family:inherit;
}
.client-role-discard-dialog::backdrop {
  background:rgba(15,31,61,.5);backdrop-filter:blur(4px);
}
.client-role-discard-dialog p {
  font-size:13px;line-height:1.65;color:var(--text-muted);margin:12px 0;
}
html[data-theme="dark"] .client-role-actions .client-role-danger,
html[data-theme="dark"] .client-role-card .client-role-danger {
  color:#fca5a5;background:var(--red-light,#3b1d25);
}
html[data-theme="dark"] .client-role-actions .client-role-danger:hover:not(:disabled),
html[data-theme="dark"] .client-role-card .client-role-danger:hover:not(:disabled) {
  color:white;background:#991b1b;
}