/* Édition 23 — uniquement la liaison : même structure, couleurs de l'apparence active. */
#link-panel {
  --link23-paper: var(--paper);
  --link23-soft: var(--cream);
  --link23-ink: var(--ink);
  --link23-muted: var(--muted);
  --link23-primary: var(--green);
  --link23-primary-ink: #fff;
  --link23-edge: var(--ui22-edge, #111);
  --link23-shadow: var(--ui22-shadow, #111);
  --link23-focus: var(--ui22-edge, #111);
  --link23-danger-bg: #fff0ed;
  --link23-danger-ink: #8b3125;
}
html[data-appearance="dark"] #link-panel {
  --link23-soft: var(--surface-hi);
  --link23-danger-bg: #4c2523;
  --link23-danger-ink: #ffd9d2;
}
html[data-appearance="glass"] #link-panel {
  --link23-paper: var(--cream);
  --link23-soft: var(--paper);
  --link23-muted: var(--ink);
  --link23-primary-ink: #062e45;
  --link23-danger-bg: #4c2523;
  --link23-danger-ink: #ffd9d2;
}
html[data-appearance="brutal"] #link-panel {
  --link23-primary-ink: var(--ink);
}
#link-panel .link-card {
  border: 3px solid var(--link23-edge);
  border-radius: 10px;
  background: var(--link23-paper);
  color: var(--link23-ink);
  box-shadow: 6px 6px 0 var(--link23-shadow);
}
#link-panel :is(.link-eyebrow, h2, h3, label, summary) { color: var(--link23-ink); }
#link-panel :is(.link-note, .link-pane p, .link-pane small, .qr-intro, .qr-advanced p, .link-advanced > p, .security-key > small) {
  color: var(--link23-muted);
}
#link-panel .link-eyebrow { padding-right: 42px; }
#link-panel .link-close {
  background: var(--link23-soft);
  color: var(--link23-ink);
  border: 2px solid var(--link23-edge);
  box-shadow: 3px 4px 0 var(--link23-shadow);
}
#link-panel .qr-card {
  border: 2px solid var(--link23-edge);
  border-radius: 8px;
  color: var(--link23-ink);
  background: var(--link23-soft);
  box-shadow: 3px 4px 0 var(--link23-shadow);
}
#link-panel :is(.qr-primary, .qr-actions button, .qr-nav button, .qr-guidance button, .link-actions button, .link-tabs button[aria-selected="true"]) {
  border: 2px solid var(--link23-edge);
  border-radius: 7px;
  background: var(--link23-primary);
  color: var(--link23-primary-ink);
  box-shadow: 3px 4px 0 var(--link23-shadow);
}
#link-panel .qr-roles .qr-primary small {
  color: inherit;
  opacity: 1;
  font-weight: 600;
}
#link-panel :is(.qr-primary, .qr-actions button, .qr-nav button, .qr-guidance button, .link-actions button):not(:disabled):is(:active, .ui20-pressed) {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 var(--link23-shadow);
}
#link-panel :is(.qr-warning, .link-unavailable) {
  background: var(--link23-soft);
  color: var(--link23-ink) !important;
  border-color: var(--link23-edge);
}
#link-panel :is(.qr-guidance, .qr-camera-placeholder, .link-tabs, #qr-status, #link-panel-status, .security-key, .link-diagnostic) {
  background: var(--link23-soft);
  color: var(--link23-ink);
  border-color: var(--link23-edge);
}
#link-panel .qr-scanner:has(#qr-video[hidden]) {
  color: var(--link23-ink);
  border-color: var(--link23-edge);
}
#link-panel .qr-render {
  color: var(--link23-ink);
  background: var(--link23-paper);
  border-color: var(--link23-edge);
}
/* La zone noire/blanche du code reste intacte : elle doit demeurer scannable. */
#link-panel :is(.qr-render p, .qr-progress) { color: var(--link23-ink); }
#link-panel :is(.qr-advanced, .link-advanced) {
  color: var(--link23-ink);
  border-color: var(--link23-edge);
}
#link-panel :is(.link-pane input:not([type="checkbox"]), .link-pane textarea, .qr-card textarea, .qr-card select, .link-tabs button:not([aria-selected="true"]), .link-device) {
  background: var(--link23-paper);
  color: var(--link23-ink);
  border: 2px solid var(--link23-edge);
}
#link-panel #link-disconnect {
  background: var(--link23-paper);
  color: var(--link23-ink);
  border-color: var(--link23-edge);
}
#link-panel #qr-status[data-error="true"] {
  color: var(--link23-danger-ink);
  background: var(--link23-danger-bg);
}
#link-panel #link-panel-status[data-connected="true"] {
  background: var(--link23-primary);
  color: var(--link23-primary-ink);
}
#link-panel :focus-visible {
  outline: 3px solid var(--link23-focus);
  outline-offset: 3px;
}
