:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6b7280;
  --border: #d1d5db;
  --panel: #f8f9fa;

  --c-private_person: #fca5a5;
  --c-private_address: #fdba74;
  --c-private_email: #fde047;
  --c-private_phone: #86efac;
  --c-private_url: #93c5fd;
  --c-private_date: #c4b5fd;
  --c-account_number: #f9a8d4;
  --c-secret: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e5e7eb;
    --muted: #9ca3af;
    --border: #3a3f47;
    --panel: #1c1f24;

    --c-private_person: #7f1d1d;
    --c-private_address: #7c3d10;
    --c-private_email: #713f12;
    --c-private_phone: #14532d;
    --c-private_url: #1e3a8a;
    --c-private_date: #4c1d95;
    --c-account_number: #831843;
    --c-secret: #991b1b;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem;
  max-width: 900px;
  margin-inline: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
}

header h1 {
  margin-bottom: 0.25rem;
}

.subtitle {
  color: var(--muted);
  margin-top: 0;
}

.subtitle a {
  color: inherit;
}

.input-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

textarea {
  width: 100%;
  min-height: 140px;
  padding: 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--fg);
  resize: vertical;
}

.controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

button {
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: white;
  font-size: 0.95rem;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

button:disabled {
  background: var(--muted);
  cursor: wait;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}

#status {
  color: var(--muted);
  font-size: 0.85rem;
}

.output-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  background: var(--panel);
  min-height: 100px;
}

.output-text {
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 1rem;
}

.output-text mark {
  border-radius: 4px;
  padding: 0.05rem 0.15rem;
  color: #1a1a1a;
  cursor: help;
}

.span-private_person { background: var(--c-private_person); }
.span-private_address { background: var(--c-private_address); }
.span-private_email { background: var(--c-private_email); }
.span-private_phone { background: var(--c-private_phone); }
.span-private_url { background: var(--c-private_url); }
.span-private_date { background: var(--c-private_date); }
.span-account_number { background: var(--c-account_number); }
.span-secret { background: var(--c-secret); }

@media (prefers-color-scheme: dark) {
  .output-text mark {
    color: #f3f4f6;
  }
}

.redacted-label {
  font-weight: 600;
  font-size: 0.8em;
  letter-spacing: 0.02em;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 3px;
  display: inline-block;
}