/* Kişisel Almanca Sözlük - Özel Pastel Renk ve Arayüz Kuralları */
:root {
  --der-bg: #dbeafe;
  --der-border: #93c5fd;
  --der-text: #1d4ed8;

  --die-bg: #ffe4e6;
  --die-border: #fca5a5;
  --die-text: #be123c;

  --das-bg: #d1fae5;
  --das-border: #86efac;
  --das-text: #047857;

  --none-bg: #f1f5f9;
  --none-border: #cbd5e1;
  --none-text: #475569;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
}

.badge-der {
  background-color: var(--der-bg);
  border: 1px solid var(--der-border);
  color: var(--der-text);
}

.badge-die {
  background-color: var(--die-bg);
  border: 1px solid var(--die-border);
  color: var(--die-text);
}

.badge-das {
  background-color: var(--das-bg);
  border: 1px solid var(--das-border);
  color: var(--das-text);
}

.badge-none {
  background-color: var(--none-bg);
  border: 1px solid var(--none-border);
  color: var(--none-text);
}

.word-row {
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.word-row:hover {
  background-color: #f1f5f9;
}