/* === 🌐 Alap stílusok === */
body {
  font-family: sans-serif;
  background: #fff;
  color: #000;
}



button {
  margin-top: 10px;
}

input {
  padding: 6px;
  font-size: 1em;
}

fieldset {
  margin-top: 20px;
}

#eredmeny,
#formazott,
#statisztika {
  margin-top: 20px;
  line-height: 1.6;
  font-family: monospace;
}

#szoveg-monospace {
  padding: 16px;
  overflow-y: auto;
  line-height: 1.6;
  font-family: monospace;
  white-space: pre-line;
}

#szoveg-sans-serif {
  padding: 16px;
  overflow-y: auto;
  line-height: 1.6;
  font-family: sans-serif;
}

/* === 🎨 Szófaji kiemelés === */
.kiemelt {
  padding: 2px 4px;
  border-radius: 3px;
  cursor: help;
  transition: background-color 0.2s ease;
}

.kiemelt:hover {
  outline: 1px dashed #ccc;
  background-color: #444 !important;
}

.kiemelt.talalat      { outline: 2px solid red; }

.kiemelt.noun         { background-color: #2e8b57; color: white; }
.kiemelt.verb         { background-color: #336699; color: white; }
.kiemelt.adverb       { background-color: #a88c00; color: white; }
.kiemelt.adjective    { background-color: #b30059; color: white; }
.kiemelt.pronoun      { background-color: #6a1b9a; color: white; }
.kiemelt.conjunction  { background-color: #008080; color: white; }
.kiemelt.article      { background-color: #999999; color: white; }

.kiemelt.fonev        { background-color: #2e8b57; color: white; }
.kiemelt.ige          { background-color: #336699; color: white; }
.kiemelt.hatarozoszo  { background-color: #a88c00; color: white; }
.kiemelt.melleknev    { background-color: #b30059; color: white; }
.kiemelt.nevmas       { background-color: #6a1b9a; color: white; }
.kiemelt.kotoszo      { background-color: #008080; color: white; }
.kiemelt.nevelo       { background-color: #999999; color: white; }

.kiemelt.ismeretlen {
  background-color: #999999;
  color: white;
  font-style: italic;
  padding: 2px 4px;
  border-radius: 3px;
}

/* === 👤 Felhasználói információk === */
.user-info {
  background-color: #f9f9f9;
  padding: 10px;
  margin: 20px 0;
  border-left: 4px solid #336699;
  font-family: sans-serif;
}

/* === ✅ Visszajelzések === */
.error {
  background-color: #ffe0e0;
  color: #900;
  padding: 10px;
  margin-top: 10px;
  border-left: 4px solid #c00;
}

.success {
  background-color: #e0ffe0;
  color: #060;
  padding: 10px;
  margin-top: 10px;
  border-left: 4px solid #0c0;
}

/* === 📊 Statisztika blokk === */
.stats-block {
  background-color: #f4f4f4;
  padding: 10px;
  margin-top: 20px;
  border-left: 4px solid #336699;
  font-family: sans-serif;
}

.stats-block ul {
  list-style: none;
  padding-left: 0;
}

.stats-block li {
  margin-bottom: 6px;
}

.stats-empty {
  font-style: italic;
  color: #999;
}

/* === 🔗 Linkek === */
a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#theme-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 0.9em;
  z-index: 1000;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
body.dark-mode #theme-panel {
  background: #1e1e1e;
  color: #e0e0e0;
  border-color: #444;
}

.article-card {
  background-color: #f9f9f9;
  padding: 12px;
  margin: 20px 0;
  border-left: 4px solid #336699;
  font-family: sans-serif;
}
body.dark-mode .article-card {
  background-color: #1e1e1e;
  border-left-color: #6699cc;
  color: #e0e0e0;
}
.article-card h3 {
  margin-top: 0;
}
.article-card small {
  font-size: 0.85em;
  color: #666;
}
body.dark-mode .article-card small {
  color: #aaa;
}

.article-card {
  background-color: #f9f9f9;
  padding: 12px;
  margin: 20px 0;
  border-left: 4px solid #336699;
  font-family: sans-serif;
}
body.dark-mode .article-card {
  background-color: #1e1e1e;
  border-left-color: #6699cc;
  color: #e0e0e0;
}
.article-card h3 {
  margin-top: 0;
}
.article-card small {
  font-size: 0.85em;
  color: #666;
}
body.dark-mode .article-card small {
  color: #aaa;
}