/* Même structure et palette que les fenêtres de données des outils. */
body.audit-ux-cro-dialog-open { overflow: hidden; }
html body dialog.tool-data-dialog.audit-ux-cro-dialog {
  --tool-dialog-bg: #06101f;
  --tool-dialog-panel: #0a162b;
  --tool-dialog-line: #36516d;
  --tool-dialog-text: #edf6ff;
  --tool-dialog-muted: #b7c7dc;
  --tool-dialog-cyan: #7dd3fc;
  box-sizing: border-box;
  width: min(940px, calc(100vw - 32px)) !important;
  max-width: none !important;
  height: min(88vh, 840px);
  height: min(88dvh, 840px);
  max-height: calc(100dvh - 24px) !important;
  margin: auto;
  padding: 0;
  overflow: hidden !important;
  border: 1px solid var(--tool-dialog-line) !important;
  border-radius: 20px !important;
  background: var(--tool-dialog-bg) !important;
  color: var(--tool-dialog-text) !important;
  color-scheme: dark;
  font: 15px/1.55 system-ui, sans-serif;
  box-shadow: 0 24px 70px #0008 !important;
}
html body dialog.audit-ux-cro-dialog:not([open]) { display: none !important; }
.audit-ux-cro-dialog::backdrop { background: #020812bb; }
html body .audit-ux-cro-dialog .tool-data-dialog-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: var(--tool-dialog-bg);
}
html body .audit-ux-cro-dialog .tool-data-dialog-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--tool-dialog-line);
  background: var(--tool-dialog-panel);
}
.audit-ux-cro-dialog .tool-data-dialog-kicker { color: var(--tool-dialog-cyan); font-size: 12px; font-weight: 700; }
html body .audit-ux-cro-dialog h2 { margin: 4px 0 0; color: var(--tool-dialog-text); font-size: 22px; line-height: 1.25; }
html body .audit-ux-cro-dialog .tool-data-dialog-close {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--tool-dialog-line);
  border-radius: 12px;
  background: var(--tool-dialog-bg);
  color: var(--tool-dialog-text);
  font-size: 28px;
  cursor: pointer;
}
html body .audit-ux-cro-dialog .tool-data-dialog-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 18px 24px;
  overflow: auto;
  background: var(--tool-dialog-bg);
}
.audit-ux-cro-dialog p { margin: 0; }
.audit-ux-cro-dialog .audit-ux-cro-url { color: var(--tool-dialog-cyan); font-size: 13px; overflow-wrap: anywhere; }
.audit-ux-cro-dialog label { font-weight: 700; }
html body .audit-ux-cro-dialog textarea {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 140px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--tool-dialog-line);
  border-radius: 12px;
  background: var(--tool-dialog-panel);
  color: var(--tool-dialog-text);
  font: 14px/1.65 system-ui, sans-serif;
  white-space: pre-wrap;
  resize: none;
  overflow: auto;
}
.audit-ux-cro-dialog .audit-ux-cro-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--tool-dialog-line);
  background: var(--tool-dialog-panel);
}
.audit-ux-cro-dialog .audit-ux-cro-status { color: var(--tool-dialog-muted); font-size: 13px; }
html body .audit-ux-cro-dialog .audit-ux-cro-copy {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--tool-dialog-cyan);
  border-radius: 12px;
  background: #7dd3fc;
  color: #06101f;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.audit-ux-cro-dialog .audit-ux-cro-copy:disabled { opacity: .65; cursor: wait; }
html body .audit-ux-cro-dialog :is(button, textarea):focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
@media (max-width: 640px) {
  html body dialog.tool-data-dialog.audit-ux-cro-dialog {
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    border-radius: 16px !important;
  }
  html body .audit-ux-cro-dialog :is(.tool-data-dialog-head, .tool-data-dialog-body, .audit-ux-cro-footer) { padding: 14px; }
  html body .audit-ux-cro-dialog h2 { font-size: 18px; }
  html body .audit-ux-cro-dialog textarea { font-size: 16px; padding: 12px; }
  .audit-ux-cro-dialog .audit-ux-cro-footer { flex-direction: column; align-items: stretch; gap: 10px; }
}