:root {
  --c-text: var(--missive-text-color-a, #1f2328);
  --c-muted: var(--missive-text-color-c, #6b7280);
  --c-border: var(--missive-light-border-color, #e5e7eb);
  --c-bg: var(--missive-background-color, #ffffff);
  --c-card: var(--missive-conversation-list-background-color, #f7f7f8);
  --c-red: var(--missive-red-color, #d93025);
  --c-green: var(--missive-green-color, #1e8e3e);
  --c-blue: var(--missive-blue-color, #2266ed);
  --c-orange: #e37400;
  --c-yellow: #b08800;
  --radius: var(--missive-border-radius, 6px);
}

@media (prefers-color-scheme: dark) {
  /* Nur die Fallbacks ändern sich – Missive-Theme-Variablen haben Vorrang. */
  :root {
    --c-text: var(--missive-text-color-a, #e6e6e6);
    --c-muted: var(--missive-text-color-c, #9aa0a6);
    --c-border: var(--missive-light-border-color, #33363b);
    --c-bg: var(--missive-background-color, #1c1d20);
    --c-card: var(--missive-conversation-list-background-color, #25272b);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { padding: 12px; }

.state { color: var(--c-muted); padding: 24px 4px; text-align: center; }
.muted { color: var(--c-muted); }
.small { font-size: 11.5px; }

.verdict {
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
  color: #fff;
}
.verdict h1 { margin: 0 0 4px; font-size: 16px; }
.verdict p { margin: 0; font-size: 12.5px; opacity: .95; }
.verdict.ok { background: var(--c-green); }
.verdict.caution { background: var(--c-orange); }
.verdict.danger { background: var(--c-red); }

.picker { margin-bottom: 12px; }
.picker select { width: 100%; margin-top: 4px; }

section { margin-bottom: 16px; }
section > h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted);
  margin: 0 0 6px;
}

.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.card.sev-high { border-left-color: var(--c-red); }
.card.sev-medium { border-left-color: var(--c-orange); }
.card.sev-low { border-left-color: var(--c-yellow); }
.card.sev-pass, .card.sev-info { border-left-color: var(--c-green); }

.who { font-weight: 600; }
.addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.addr .reg { font-weight: 700; color: var(--c-text); }
.addr .sub { color: var(--c-muted); }

.linktext { font-style: italic; }
.target { margin-top: 2px; }

ul.findings { list-style: none; margin: 6px 0 0; padding: 0; }
ul.findings li { position: relative; padding-left: 16px; margin: 3px 0; }
ul.findings li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-muted);
}
ul.findings li.sev-high::before { background: var(--c-red); }
ul.findings li.sev-medium::before { background: var(--c-orange); }
ul.findings li.sev-low::before { background: var(--c-yellow); }
ul.findings li.sev-pass::before { background: var(--c-green); }
ul.findings li.sev-info { color: var(--c-muted); }

ol.chain { margin: 6px 0 0; padding-left: 20px; font-size: 12px; }
ol.chain li { margin: 2px 0; }

.actions { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

button.linkbtn {
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-blue);
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
button.linkbtn:disabled { opacity: .6; cursor: default; }

details > summary { cursor: pointer; color: var(--c-muted); margin-bottom: 6px; }

footer { border-top: 1px solid var(--c-border); padding-top: 8px; }

.error { color: var(--c-red); }

.testmode label { display: block; margin: 6px 0; }
.testmode input, .testmode textarea {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 5px 6px;
  font: inherit;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-text);
}
.testmode h2 { margin: 0 0 4px; font-size: 15px; }
#test-result { margin-top: 16px; }