/* Keyword Density Analyzer. Every class starts with kda- so the styles do not clash when the tool is embedded. */
:root {
  --kda-bg: #f6f7f9;
  --kda-card: #ffffff;
  --kda-ink: #15181e;
  --kda-muted: #5b6474;
  --kda-line: #e2e5ea;
  --kda-accent: #2557d6;
  --kda-accent-ink: #ffffff;
  --kda-good: #157347;
  --kda-good-bg: #e3f4ea;
  --kda-low: #8a5a00;
  --kda-low-bg: #fdf1d8;
  --kda-high: #b42318;
  --kda-high-bg: #fde7e5;
  --kda-missing: #5b6474;
  --kda-missing-bg: #eef0f3;
  --kda-radius: 12px;
  --kda-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kda-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kda-bg: #0f1115;
    --kda-card: #171a21;
    --kda-ink: #e8eaee;
    --kda-muted: #9aa3b2;
    --kda-line: #2a2f3a;
    --kda-accent: #7aa2ff;
    --kda-accent-ink: #0f1115;
    --kda-good: #6fd49b;
    --kda-good-bg: #15301f;
    --kda-low: #f2c065;
    --kda-low-bg: #33280f;
    --kda-high: #ff8f86;
    --kda-high-bg: #3a1714;
    --kda-missing: #9aa3b2;
    --kda-missing-bg: #232833;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kda-bg);
  color: var(--kda-ink);
  font: 16px/1.5 var(--kda-font);
}

.kda {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

.kda-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.kda-header img { flex: none; margin-top: 4px; }
.kda-header h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.2; }
.kda-header p { margin: 0; color: var(--kda-muted); max-width: 64ch; }
.kda-header strong { color: var(--kda-ink); font-weight: 600; }

.kda-input,
.kda-results {
  background: var(--kda-card);
  border: 1px solid var(--kda-line);
  border-radius: var(--kda-radius);
  padding: 20px;
  margin-bottom: 16px;
}

.kda-field { margin-bottom: 16px; }
.kda-field label,
.kda-label-row label { display: block; font-weight: 600; margin-bottom: 6px; }
.kda-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kda-buttons { display: inline-flex; gap: 12px; }
.kda-hint { color: var(--kda-muted); font-weight: 400; font-size: 14px; }

.kda textarea,
.kda input[type="text"],
.kda select {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--kda-bg);
  border: 1px solid var(--kda-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.kda textarea { resize: vertical; min-height: 200px; }
.kda select { width: auto; padding: 6px 10px; margin-left: 8px; }

.kda textarea:focus,
.kda input:focus,
.kda select:focus,
.kda button:focus-visible {
  outline: 2px solid var(--kda-accent);
  outline-offset: 2px;
}

.kda-options { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.kda-check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.kda-check input { width: 18px; height: 18px; accent-color: var(--kda-accent); }
.kda-select { display: inline-flex; align-items: center; }

.kda-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

.kda-stats div { background: var(--kda-bg); border-radius: 8px; padding: 10px 12px; }
.kda-stats dt { color: var(--kda-muted); font-size: 13px; }
.kda-stats dd { margin: 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }

.kda-results h2 { font-size: 18px; margin: 0 0 2px; }
#kda-keyword-block { margin-bottom: 24px; }
#kda-keyword-block .kda-hint { margin: 0 0 10px; }

.kda-table-wrap { overflow-x: auto; }
.kda-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.kda-table th,
.kda-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--kda-line); }
.kda-table th { color: var(--kda-muted); font-weight: 500; font-size: 14px; }
.kda-table td:first-child { color: var(--kda-muted); width: 3em; }
#kda-keyword-rows td:first-child { color: inherit; width: auto; }
.kda-table td.kda-phrase { font-family: var(--kda-mono); font-size: 15px; word-break: break-word; }

.kda-level { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.kda-level-good { color: var(--kda-good); background: var(--kda-good-bg); }
.kda-level-low { color: var(--kda-low); background: var(--kda-low-bg); }
.kda-level-high { color: var(--kda-high); background: var(--kda-high-bg); }
.kda-level-missing { color: var(--kda-missing); background: var(--kda-missing-bg); }

.kda-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--kda-line); margin-bottom: 4px; }
.kda-tabs button {
  font: inherit;
  color: var(--kda-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  cursor: pointer;
}
.kda-tabs button[aria-selected="true"] { color: var(--kda-ink); border-bottom-color: var(--kda-accent); font-weight: 600; }

.kda-empty { color: var(--kda-muted); margin: 16px 0 4px; }

.kda-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

.kda-button {
  font: inherit;
  font-weight: 600;
  color: var(--kda-accent-ink);
  background: var(--kda-accent);
  border: 1px solid var(--kda-accent);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
}
.kda-button-quiet { color: var(--kda-accent); background: transparent; }
.kda-button:disabled { opacity: 0.45; cursor: not-allowed; }

.kda-link {
  font: inherit;
  font-size: 14px;
  color: var(--kda-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kda-status { color: var(--kda-muted); font-size: 14px; }

.kda-footer { color: var(--kda-muted); font-size: 14px; }
.kda-footer p { margin: 0; }

@media (max-width: 520px) {
  .kda { padding-top: 20px; }
  .kda-header h1 { font-size: 22px; }
  .kda-input,
  .kda-results { padding: 14px; }
  .kda-tabs button { padding: 8px 10px; }
}