 <style>

.converter-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* A két oszlop megtartása */
    gap: 25px;
    margin-bottom: 25px;
}

.input-container,
.output-container {
    background: var(--surface-color);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.preview-container {
    background: var(--surface-color);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    width: 100%; /* Teljes szélesség az ablakok alatt */
    grid-column: 1 / -1; /* A teljes szélességet kitölti */
}
.button-group .setting-item.toggle {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.button-group .toggle-switch {
    padding: 5px;
    background: transparent;
}

.button-group .label-text {
    font-size: 0.9em;
    white-space: nowrap;
}
/* Improve toggle switch alignment */
.setting-item.toggle {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.toggle-switch {
    display: flex;
    align-items: center;
    padding: 5px;
    background: transparent;
}

.label-text {
    margin-left: 5px;
    line-height: 24px; /* Match the height of the slider */
    display: inline-flex;
    align-items: center;
    font-size: 0.9em;
}

/* For buttons next to switches in button groups */
.button-group .setting-item.toggle {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 0;
    height: 100%;
}

.button-group {
    display: flex;
    align-items: center; /* Ensure all items are vertically centered */
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* Ensure the slider has consistent dimensions */
.slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    margin-right: 5px;
    transition: .4s;
    flex-shrink: 0;
}

/* Ensure the button and toggle switch have the same height when next to each other */
.button-group .btn,
.button-group .toggle-switch {
    height: 35px; /* Match the height of buttons */
    display: inline-flex;
    align-items: center;
}


/* A meglévő stílushoz adjuk hozzá ezeket a szabályokat */
.setting-item.custom-size input[type="number"] {
    width: 120px; /* Fix szélesség a konzisztencia érdekében */
    padding: 8px; /* Kis tér belülre */
    font-size: 14px; /* Betűméret összehangolása */
    border: 1px solid var(--primary-color); /* Szegély szín a jellemző zöld */
    border-radius: 5px; /* Lapos sarkok */
    background-color: var(--surface-color); /* Háttérszín */
    color: var(--secondary-color); /* Szövegszín */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Átmenetes hatás */
}

.setting-item.custom-size input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-dark); /* Sötétebb zöld fókusz esetén */
    box-shadow: 0 0 0 3px rgba(99, 143, 17, 0.2); /* Finom árnyék */
}
#page-size {
    font-family: var(--font-family-base);
    font-size: 14px !important;
    max-width: 120px;
    padding: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--primary-color); /* Szegély szín */
    border-radius: 5px;
    background-color: var(--surface-color); /* Háttérszín */
    color: var(--secondary-color); /* Szövegszín */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#page-size:focus {
    outline: none;
    border-color: var(--primary-dark); /* Sötétebb zöld fókusz esetén */
    box-shadow: 0 0 0 3px rgba(99, 143, 17, 0.2); /* Finom árnyék */
}

/* Kijelölési szín módosítása */
#page-size option:checked {
    background-color: var(--primary-color); /* Zöld háttér */
    color: white; /* Fehér szöveg */
}

/* Opciók stílusa */
#page-size option {
    background: var(--surface-color);
    color: var(--secondary-color);
    padding: 8px;
}

/* Alap stílus a legördülő menünek */
#page-size {
    font-family: var(--font-family-base);
    font-size: 14px !important;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background-color: var(--surface-color);
    color: var(--secondary-color);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 200px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23638f11'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}

/* Hover állapot */
#page-size:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 143, 17, 0.1);
}

/* Fókusz állapot */
#page-size:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 143, 17, 0.2);
}

/* Opciók stílusai */
#page-size option {
    background: var(--surface-color);
    color: var(--secondary-color);
    padding: 8px;
}

/* Egyéni nyíl eltávolítása IE-ben */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #page-size {
        background-image: none;
        padding-right: 8px;
    }
}

#braille-preview {
    /* ... egyéb stílusok ... */
    white-space: pre-wrap; /* Tartsuk meg a sortöréseket */
    font-family: 'BraillePro', Arial, sans-serif;
}

.settings-container .settings-group:hover {
    transform: none;
    box-shadow: none;
}

/* === Root Változók === */
:root {
  --primary-color: #638f11;
  --primary-dark: #638f11;
  --primary-light: #81C784;
  --secondary-color: #424242;
  --secondary-light: #757575;
  --accent-color: #2196F3;
  --background-color: #f5f5f5;
  --surface-color: #ffffff;
  --error-color: #D32F2F;
  --success-color: #638f11;
  --warning-color: #ff9800;
  --font-family-base: 'Roboto', sans-serif;
}


/* BraillePro font betöltése */
@font-face {
  font-family: 'BraillePro';
  src: url('assets/BraillePro-kolibri-HU2502.woff2') format('truetype');
}

/* Alap globális stílusok */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; overflow-y: scroll; } /* Scrollbar mindig látszik */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--secondary-color);
  background-color: var(--background-color);
  min-height: 100%; /* Fontos a lábléc lenyomásához */
  display: flex; /* Flexbox a body-ra */
  flex-direction: column; /* Függőleges elrendezés */
}

h1, h2, h3, h4, h5, h6,
.btn, .form-label, .card-title,
#input, #output, textarea, button,
.label-text, .nav-menu a {
  font-family: var(--font-family-base);
}

#braille-preview, .braille {
  font-family: 'BraillePro', Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--secondary-color);
  background-color: var(--background-color);
}

.container {
  max-width: 1200px;
  margin: 1 0 auto;
  padding: 20px;
  width: 100%;
  flex-grow: 1; /* A container töltse ki a maradék helyet */
}

html {
  overflow-y: scroll;
}

main {
  flex-grow: 1;
  min-height: 0;
  flex-direction: column;
}

/* Header stílusok */
header {
    background-color: var(--surface-color);
    padding: 10px 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    gap: 15px;
    flex-wrap: wrap;
}

.logo-container {
  height: 45px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo {
  height: 100%;
  width: auto;
}

/* === ÚJ SZABÁLYOK === */
/* Konténer az ikonnak és a címsornak */
.title-container {
    display: flex;
    align-items: center; /* Vertikálisan középre igazítja az ikont és a szöveget */
    gap: 7px;           /* Kis térköz az ikon és a szöveg között */
    flex: 1;             /* Elfoglalja a rendelkezésre álló helyet, ahogy korábban a H1 tette */
    min-width: 0;        /* Megakadályozza, hogy a flex elem túlnyúljon a tárolóján */
}

/* Az új ikon stílusa */
.title-icon {
    height: 23px;        /* Az ikon magassága (igazítsd, ha szükséges) */
    width: auto;         /* Megtartja az arányokat */
    flex-shrink: 0;      /* Megakadályozza, hogy az ikon összenyomódjon kis képernyőn */
}


.site-title {
  color: var(--primary-color);
  font-size: 1.9rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /*flex: 1;
  min-width: 0;
  text-align: left;*/
  font-weight: bold;
}


  #account-actions-desktop { display: none !important; } /* Desktop fiók gomb/státusz elrejtése */

/* === Header Elválasztó (HTML elemmel) === */

.header-divider {
    display: none; /* Alapból (mobil nézetben) rejtve */
    color: #c3c1c1; /* Halvány szürke szín */
    font-size: 1.2em;
    font-weight: 100;
    line-height: 1; /* Segíthet a vertikális igazításban */
    align-self: center; /* Vertikális igazítás a header flex konténerben */
}

/* Az elválasztó megjelenítése csak szélesebb képernyőkön */
/* Igazítsd a töréspontot ahhoz, ahol a mobil menü eltűnik */
@media (min-width: 901px) {
    .header-divider {
        display: inline; /* Megjelenítés asztali nézetben */
    }
}


nav-wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

.nav-menu {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    height: fit-content;
    align-items: center;
}

.nav-menu a {
  text-decoration: none;
  color: var(--secondary-color);
  padding: 4px 8px;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 0.8rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: transparent;
  height: fit-content;
}

.nav-menu a.active,
.nav-menu a:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nav-menu a i {
    font-size: 0.85rem;
    margin-right: 3px; } /* Ikonokhoz kis jobb margó */

#user-status {
    display: none; /* JS kezeli */
    margin-left: 15px;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    flex-shrink: 0;
}
#user-email-display { font-size: 0.9em; }
#logout-button { padding: 5px 10px; font-size: 0.8em; }

.welcome-message {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: var(--surface-color);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.welcome-message h2 {
  color: var(--primary-color);
  margin-bottom: 15px;
}

.welcome-message p {
  color: var(--secondary-light);
  max-width: 800px;
  margin: 0 auto;
}

.converter-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

.input-container,
.output-container {
  background: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.input-container textarea,
.output-container textarea {
  flex: auto;
  min-height: 250px;
}

.input-container h3,
.output-container h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.2em;
}

textarea {
  width: 100%;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  resize: vertical;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.3s ease;
  position: relative;
  background: transparent;
}

textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.char-counter {
  text-align: right;
  color: var(--secondary-light);
  margin: 8px 0;
  font-size: 0.9em;
  transition: color 0.3s ease;
}

.output-counter {
  color: var(--primary-color);
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 8px;
}

.btn i {
  font-size: 16px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn.primary {
  background: var(--primary-color);
  color: white;
}

.btn.secondary {
  background: var(--secondary-color);
  color: white;
}

/* Letiltott gomb stílusa (EREDETI - maradjon meg fallbacknek) */
.btn:disabled {
    background-color: #ccc;
    border-color: #ccc; /* Ha volt border */
    color: #666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    /* pointer-events: none; /* <<< HA VAN ILYEN, TÖRÖLD! */
 }

/* ÚJ SZABÁLY: Vizuálisan letiltott gomb (JS fogja ezt használni) */
.btn.disabled {
    background-color: #ccc !important; /* !important lehet szükséges a .btn.primary felülírásához */
    border-color: #ccc !important; /* Ha volt border */
    color: #666 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    /* Itt biztosan NE legyen pointer-events: none; */
}

.preview-container {
  background: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  position: relative;
}

.toggle-preview {
  position: absolute;
  right: 20px;
  top: 20px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--primary-color);
  transition: transform 0.3s ease;
  padding: 5px 10px;
  border-radius: 5px;
}

.toggle-preview:hover {
  background-color: rgba(76, 175, 80, 0.1);
}

.preview-container.collapsed {
  padding: 15px 25px;
}

.preview-container.collapsed #braille-preview {
  display: none;
}

.preview-container h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.2em;
}

#braille-preview {
  font-family: 'BraillePro', Arial, sans-serif;
  font-size: 24px;
  line-height: 1.5;
  min-height: 50px;
  padding: 20px;
  background: var(--background-color);
  border-radius: 8px;
  margin-top: 15px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.statistics-container {
  background: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}

.statistics-container h3 {
  color: var(--primary-color);
  margin-bottom: 20px;
  font-size: 1.2em;
}

.charts-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.chart-container {
  background: var(--background-color);
  padding: 20px;
  border-radius: 10px;
  height: 350px;
  transition: transform 0.3s ease;
  position: relative;
}

.chart-container h4 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.1em;
  text-align: center;
}

.chart-container canvas {
  width: 100% !important;
  height: calc(100% - 60px) !important;
}

.chart-container.full-width {
  width: 100%;
  margin-bottom: 30px;
  background: var(--background-color);
  padding: 20px;
  height: 450px;
}

@media (max-width: 768px) {
  .charts-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .chart-container {
    height: 400px;
  }

  .chart-container.full-width {
    height: 400px;
  }

  .chart-container canvas {
    height: calc(100% - 80px) !important;
  }
}

.char-table-container {
  background: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  margin-top: 20px;
}

.char-table-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  padding: 8px 15px;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary-color);
  color: white;
}

.char-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.char-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: var(--background-color);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.char-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.char-item .normal {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--secondary-color);
}

.char-item .braille {
  font-family: 'BraillePro', Arial, sans-serif;
  font-size: 28px;
  color: var(--primary-color);
}

.charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.chart-container canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 300px;
}

.preview-container.hidden,
.statistics-container.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .converter-container {
    grid-template-columns: 1fr;
  }

  .charts {
    grid-template-columns: 1fr;
  }

  .chart-container {
    min-height: 250px;
  }

  .chart-container canvas {
    max-height: 200px;
  }

  #braille-preview {
    font-size: 18px;
    padding: 15px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Mobil menü konténer */
  .nav-menu {
    display: none; /* Alapból rejtve */
    position: absolute;
    top: calc(100% + 5px); /* Fejléc alá pozicionálás */
    left: 0; right: 0;
    background: var(--surface-color);
    flex-direction: column;
    padding: 0;
    margin-top: 5px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;

  }
  .nav-menu.active {
    display: flex; /* Megjelenítés */
    opacity: 1;
    transform: translateY(0);
  }

 /* Mobil menüpontok stílusa */
  .nav-menu a {
    padding: 12px 20px; /* Kényelmesebb méret */
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--background-color);
    font-size: 1rem; /* Nagyobb betűméret */
    display: flex;
    align-items: center;
    gap: 8px;

  }
   .nav-menu a:last-child { border-bottom: none; }
   .nav-menu a i { font-size: 1rem; }

  header.menu-open {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 2px 20px rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 480px) {
  .chart-container {
    padding: 10px;
  }

  .chart-container h4 {
    font-size: 1em;
  }

  #braille-preview {
    font-size: 16px;
    padding: 10px;
  }
}

section h2 {
  color: var(--primary-color);
  margin-bottom: 25px;
  font-size: 1.5em;
  text-align: center;
}

/* Desktop Auth / User Status */
#account-actions-desktop {
    display: flex;
    align-items: center; /* Igazítja a Fiók gombot vagy a user statuszt */
    height: 35px; /* Példa: Fix magasság (a gombokkal megegyező) */
}

#account-action-link, #logout-button {
   height: 100%; /* Kitölti a szülő magasságát */
   display: inline-flex; /* Flex az ikon és szöveg igazításához */
   align-items: center;
   padding: 5px 12px; /* Igazítsd a többi gombhoz */
   font-size: 0.85rem; /* Igazítsd a többi gombhoz */
}

#user-status {
     height: 100%; /* Kitölti a szülő magasságát */
     display: flex; /* Marad flex */
     align-items: center;
     gap: 10px;
     padding: 0 5px; /* Esetleg kis padding */
}
#user-email-display {
    font-size: 0.9em;
    line-height: 1; /* Ne növelje a magasságot */
}
#logout-button { padding: 5px 10px; font-size: 0.8em; }

/* === Mobil Menü === */
.mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1010; /* Modális fölött */ margin-left: 15px; }
.mobile-menu-toggle span { width: 100%; height: 3px; background: var(--primary-color); border-radius: 3px; transition: all 0.3s ease; position: relative; transform-origin: 1px; }
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg); }

/* Mobil menü elemek alapból rejtve (JS kezeli) */
/* Mobil menü linkek */
.nav-menu a.js-auth-menu-item,
.nav-menu span.js-auth-menu-item {
     height: fit-content;

}
.nav-user-email { color: var(--primary-color); padding: 15px 25px; font-weight: 500; } /* Email stílusa a mobil menüben */

@media (max-width: 768px) {
  .converter-container {
    grid-template-columns: 1fr;
  }

  .charts {
    grid-template-columns: 1fr;
  }

  .chart-container {
    min-height: 250px;
  }

  .chart-container canvas {
    max-height: 200px;
  }

  #braille-preview {
    font-size: 18px;
    padding: 15px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    flex-direction: column;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-menu.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-menu a {
    padding: 15px 25px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .nav-menu a:last-child {
    border-bottom: none;
  }

  header.menu-open {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 2px 20px rgba(0, 0, 0, 0.12);
  }
}

@media (max-width: 480px) {
  .chart-container {
    padding: 10px;
  }

  .chart-container h4 {
    font-size: 1em;
  }

  #braille-preview {
    font-size: 16px;
    padding: 10px;
  }
}

section {
  display: none; opacity: 0; transition: opacity 0.3s ease; min-height: 150px; padding: 10px 0;
}
.section.active { display: block; opacity: 1; }

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toastify {
  padding: 12px 20px;
  color: white;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.toastify.success {
  background: var(--success-color);
}

.toastify.error {
  background: var(--error-color);
}

.toastify.warning {
  background: var(--warning-color);
}

.settings-container,
.about-content {
  background: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  width: 100%;
  margin: 0 auto;
}

.settings-group {
  margin-bottom: 30px;
  padding: 20px;
  background: var(--background-color);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.settings-group:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-group h3 {
  color: var(--primary-color);
  margin-bottom: 20px;
  font-size: 1.2em;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 10px;
}

.setting-item {
  margin-bottom: 20px;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-item label {
  display: contents;
  margin-bottom: 10px;
  color: var(--secondary-color);
  font-weight: 500;
}

.setting-item input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-color);
  outline: none;
  -webkit-appearance: none;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #638f11;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.setting-item input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--primary-dark);
}

.size-value {
  display: inline-block;
  min-width: 60px;
  text-align: center;
  background: var(--primary-color);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  margin-left: 10px;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  background: var(--surface-color);
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.toggle-switch:hover {
  background-color: rgba(76, 175, 80, 0.1);
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 24px;
  margin-right: 10px;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary-color);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.label-text {
  color: var(--secondary-color);
  font-weight: 500;
}

.feature-description {
  background: var(--background-color);
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.feature-description h3 {
  color: var(--primary-color);
  font-size: 1.2em;
  margin: 25px 0 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
}

.feature-description h3:first-child {
  margin-top: 0;
}

.feature-description p {
  color: var(--secondary-color);
  line-height: 1.6;
  margin-bottom: 15px;
}

.feature-description ul,
.feature-description ol {
  margin: 15px 0;
  padding-left: 25px;
}

.feature-description li {
  color: var(--secondary-color);
  margin-bottom: 10px;
  line-height: 1.5;
  position: relative;
}

.feature-description li::marker {
  color: var(--primary-color);
}

.version-info {
  background: var(--primary-color);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-top: 20px;
  display: inline-block;
}

.version-info p {
  margin: 5px 0;
  color: white;
  font-size: 0.95em;
}

.fas,
.fab,
.far {
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav-menu a:hover i {
  transform: scale(1.2);
  color: white;
}

.btn:hover i {
  transform: translateX(2px);
}

.stat-card:hover i {
  transform: scale(1.2) rotate(5deg);
  color: var(--primary-color);
}

.feature-description i {
  color: #fff;
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.feature-description li:hover i {
  transform: translateX(3px);
}

.toggle-preview:hover i {
  transform: translateY(2px);
}

.chart-container h4:hover i {
  transform: rotate(15deg);
}

.export-btn:hover i {
  transform: translateY(-2px);
}

.print-btn:hover i {
  transform: rotate(-10deg);
}

button[data-tooltip="Braille szöveg másolása a vágólapra"]:hover i {
  transform: scale(1.1);
}


.mobile-menu-toggle:hover span {
  background-color: var(--primary-dark);
}

.guide-container {
  background: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  position: relative;
}

.guide-container h3 {
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.2em;
}

.guide-container.collapsed {
  padding: 15px 25px;
}

#guide-content {
  font-size: 16px;
  line-height: 1.5;
  min-height: 50px;
  padding: 20px;
  background: var(--background-color);
  border-radius: 8px;
  margin-top: 15px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.guide-container.collapsed #guide-content {
  display: none;
}

.guide-container.hidden {
  display: none !important;
}

.export-btn,
.print-btn {
  background-color: rgba(66, 66, 66, 0.6) !important;
  color: white !important;
  border: none;
  transition: opacity 0.3s ease;
}

.export-btn:hover,
.print-btn:hover {
  opacity: 0.8;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 25px 0;
}

.stat-card {
  background: var(--background-color);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-card h4 {
  color: var(--secondary-light);
  margin-bottom: 12px;
  font-size: 1em;
}

.stat-card p {
  font-size: 24px;
  color: var(--primary-color);
  font-weight: bold;
}

.char-comparison {
  background: var(--background-color);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
}

.comparison-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.comparison-card {
  background: var(--surface-color);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  min-width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comparison-card h4 {
  color: var(--primary-color);
  font-size: 1.1em;
  margin-bottom: 10px;
}

.char-count {
  font-size: 2em;
  font-weight: bold;
  color: var(--primary-color);
  margin: 10px 0;
}

.char-label {
  color: var(--secondary-color);
  font-size: 0.9em;
}

.comparison-arrow {
  color: var(--primary-color);
  font-size: 1.5em;
}

.comparison-difference {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  padding: 10px;
  border-radius: 5px;
  font-size: 0.9em;
  background: var(--surface-color);
}

@media (max-width: 768px) {
  .comparison-cards {
    flex-direction: column;
  }

  .comparison-arrow {
    transform: rotate(90deg);
  }

  .comparison-card {
    width: 100%;
  }
}

/* === Footer (JAVÍTOTT) === */
footer {
  flex-shrink: 0;
  background-color: var(--surface-color);
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  text-align: left;
  font-size: 0.9em;
  color: var(--secondary-color);
  width: 100%;
}
footer p { margin: 0; line-height: 1.4; }
footer a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; }
footer a:hover { color: var(--primary-dark); }

@media (max-width: 768px) {
  footer {
    padding: 10px 15px;
    font-size: 0.85em;
  }
}

@media (max-width: 768px) {
  .site-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .site-title {
    font-size: 1.7rem;
    order: 2;
    width: calc(100% - 60px);
  }

  .nav-wrapper {
    order: 3;
    width: 100%;
  }

  .logo-container {
    height: 40px;
    order: 1;
  }
}

@media (max-width: 1024px) {
  .site-title {
    font-size: 1.8rem;
  }

  .nav-menu {
    gap: 10px;
  }

  .nav-menu a {
    padding: 5px 10px;
    font-size: 0.85rem;
  }

  .nav-menu a i {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  header {
    padding: 10px 15px;
    gap: 10px;
  }

  .site-title {
    font-size: 1.7rem;
  }

  .logo-container {
    height: 40px;
  }

  .nav-menu a {
    padding: 4px 8px;
    font-size: 0.8rem;
  }

  .nav-menu a i {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  .site-title {
    font-size: 1.6rem;
    order: 2;
    width: calc(100% - 90px);
  }

  .nav-wrapper {
    order: 3;
    width: 100%;
  }

  .logo-container {
    height: 35px;
    order: 1;
  }

  .mobile-menu-toggle {
    width: 25px;
    height: 20px;
  }
}

@media (max-width: 1024px) {
  .nav-menu a {
    padding: 5px 10px;
    font-size: 0.85rem;
  }

  .nav-menu a i {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .nav-menu a {
    padding: 4px 8px;
    font-size: 0.8rem;
  }

  .nav-menu a i {
    font-size: 0.8rem;
  }
}


/* Tooltip láthatóság animáció */
*[data-tooltip]:hover:after,
*[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

*[data-tooltip]:after,
*[data-tooltip]:before {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}




/* A lenyíló összecsukó nyilacska pozíciójának javítása */
.toggle-preview {
    position: absolute;
    right: 20px;
    top: 20px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--primary-color);
    transition: transform 0.3s ease;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 1; /* Biztosítjuk, hogy a nyilacska a tooltip felett legyen */
}

.toggle-preview:hover {
    background-color: rgba(76, 175, 80, 0.1);
}

.toggle-preview i {
    transition: transform 0.3s ease;
}

.toggle-preview:hover i {
    transform: translateY(2px);
}

#page-size {
    font-size: 12px; /* Kisebb betűméret a szöveg rövidítéséhez */
    max-width: 120px; /* Szűkebb szélesség a layout-hoz igazodva */
    padding: 5px; /* Kis tér a jobb megjelenéshez */
    overflow: hidden; /* Elrejti a kilógó szöveget */
    text-overflow: ellipsis; /* Három pont a túl hosszú szöveghez */
    white-space: nowrap; /* Megakadályozza a szöveg tördelését */
}

.orientation-buttons {
    //display: flex;//
    align-items: center;
    margin-bottom: 15px;
}

.orientation-label {
    margin-right: 10px;
    color: var(--primary-color); /* #638f11 */
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}

/* Alapértelmezett (inaktív) gomb stílusa */
.orientation-btn {
    margin-right: 5px;
    background: #42424299 !important; /* Szürke: #42424299, felülírja a .btn.primary-t */
    color: white !important;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Aktív gomb stílusa */
.orientation-btn.active {
    background: var(--primary-color) !important; /* Zöld: #638f11 */
    color: white !important;
}

.orientation-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.orientation-btn i {
    margin-right: 5px;
    font-size: 16px;
}

.orientation-btn:hover i {
    transform: translateX(2px);
}

#settings-icon {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: rgba(66, 66, 66, 0.6);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%; /* Teljesen kerek */
    width: 40px; /* Fix méret */
    height: 40px; /* Fix méret */
    display: flex; /* Középre igazítás */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

#settings-icon:hover {
    opacity: 0.8;
}

.preview-container.collapsed .button-group,
.preview-container:not(.collapsed) #braille-preview:empty + .button-group {
    display: none;
}
/* === MODÁLIS ABLAK STÍLUSOK === */
.modal {
  display: none; /* Alapból rejtve */
  position: fixed;
  z-index: 1050;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  display: flex; /* Flexbox a középre igazításhoz */
  justify-content: center;
  align-items: center;
  padding: 20px; /* Térköz a szélektől mobilon */
}

.modal.active {
  display: flex; /* Látható */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.modal-content {
  background-color: var(--surface-color);
  margin: auto;
  padding: 25px 30px; /* Kisebb padding */
  border-radius: 10px;
  width: 95%; /* Szélesebb mobilon */
  max-width: 400px; /* Kisebb max szélesség */
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.close-modal {
  color: #aaa; position: absolute; top: 8px; right: 12px; font-size: 26px; font-weight: bold; line-height: 1; cursor: pointer; transition: color 0.2s ease;
}
.close-modal:hover, .close-modal:focus { color: #333; text-decoration: none; }

/* === Auth Űrlap Stílusok (Modálisban) === */
.auth-form-container { margin-top: 15px; }
.modal-content h2 { text-align: center; color: var(--primary-color); margin-bottom: 20px; font-size: 1.4em; } /* Cím a modal-contentben */
.auth-form-container .form-group { margin-bottom: 15px; }
.auth-form-container label { display: block; margin-bottom: 5px; color: var(--secondary-color); font-weight: 500; font-size: 0.9em; }
.auth-form-container input[type="text"],  /* <<< HOZZÁADVA */
.auth-form-container input[type="email"],
.auth-form-container input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
box-sizing: border-box; /* Biztosítja, hogy a padding ne növelje a méretet */
    margin-bottom: 0; /* Ha a .form-group adja a térközt */
}
.auth-form-container input[type="text"]:focus,  /* <<< HOZZÁADVA */
.auth-form-container input[type="email"]:focus,
.auth-form-container input[type="password"]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(99, 143, 17, 0.1); }
.auth-form-container button[type="submit"] { width: 100%; padding: 11px 20px; margin-top: 10px; }
.form-error { display: none; color: var(--error-color); margin-bottom: 15px; font-size: 0.85em; font-weight: bold; text-align: center; padding: 8px; background-color: rgba(211, 47, 47, 0.08); border: 1px solid var(--error-color); border-radius: 4px; }
.auth-form-container p { margin-top: 15px; text-align: center; font-size: 0.9em; }
.auth-form-container p a { color: var(--primary-color); text-decoration: underline; cursor: pointer; }
.auth-form-container p a:hover { color: var(--primary-dark); }

@media (max-width: 900px) {
  .mobile-menu-toggle {
    display: flex;
  }
.nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: auto;
    right: 0;
    width: 200px;
    background: var(--surface-color);
    flex-direction: column;
    padding: 0;
    margin-top: 5px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .nav-menu.active {
    display: flex;
  }
}

/* === Saját Fiók Szekció Stílusok === */
#account h2 {
  color: var(--primary-color);
  margin-bottom: 30px; /* Nagyobb térköz */
  font-size: 1.6em;   /* Kiemeltebb cím */
  text-align: center;
  padding-bottom: 10px;
}

/* Konténer a fiók szekciókhoz */
.account-container {
    background: var(--surface-color);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 1fr; /* Alapból egy oszlop */
    gap: 35px; /* Nagyobb térköz a részek között */
}

/* Grid elrendezés nagyobb képernyőn */
@media (min-width: 992px) {
    .account-container {
        grid-template-columns: 1fr 1fr; /* Két egyenlő oszlop */
        grid-template-areas:
            "info username-form" /* Info balra, username form jobbra fent */
            "info password-form"; /* Info balra, password form jobbra lent */
        align-items: start; /* Az elemeket a cellájuk tetejéhez igazítja */
        gap: 30px 40px; /* Sorok és oszlopok közötti tér növelése */
    }
    .profile-info {
         grid-area: info;
         /* Biztosítjuk, hogy a profil info kitöltse a rendelkezésre álló magasságot, ha szükséges */
         align-self: stretch;
    }
    .update-username {
        grid-area: username-form;
        /* Eltávolítjuk az align-self-et, mert a grid area már kijelöli a helyét */
    }
    .update-password {
        grid-area: password-form;
        /* Eltávolítjuk az align-self-et */
    }

    /* A max-width és a margin auto megmarad a jobb oldali űrlapok középre igazításához */
    .update-username, .update-password {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        width: 100%; /* Fontos, hogy kitöltse a grid cellát a max-width-ig */
    }
}

/* Általános fiók szekció stílus */
.account-section {
    background: var(--background-color);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.account-section h3 {
    color: var(--primary-color); /* Sötétebb zöld */
    margin-bottom: 20px;
    font-size: 1.3em;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 8px;
}

/* Fiók Információk Stílusa */
.profile-info .info-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobilon egy oszlop */
    gap: 15px;
}

@media (min-width: 576px) {
    .profile-info .info-grid {
        grid-template-columns: auto 1fr; /* Címke és érték külön oszlopban */
        align-items: center; /* Vertikális igazítás */
         gap: 10px 20px; /* Sorok és oszlopok közötti tér */
    }
}

/* Alapból elrejtjük a lejárat konténerét CSS-sel */
#account-expires-container {
    display: none;
}

/* Ha megkapja a 'visible' osztályt, akkor a display: contents érvényesüljön rá */
#account-expires-container.visible {
    display: contents; /* Így a label és value a grid celláiba kerülnek */
}

/* Biztosítjuk, hogy az info-item továbbra is display: contents legyen */
.profile-info .info-item {
    padding-bottom: 10px;
    border-bottom: 1px dashed #eee;
    display: contents; /* EZ A FONTOS SZABÁLY */
}
.profile-info .info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}


.profile-info .info-label {
    font-weight: 500;
    color: var(--secondary-light);
    font-size: 0.95em;
    display: inline-flex; /* Ikonhoz */
    align-items: center;
    gap: 8px;
    grid-column: 1; /* Mindig az első oszlopban */
}

.profile-info .info-label i {
    color: var(--primary-color);
    width: 16px; /* Fix szélesség az ikonoknak */
    text-align: center;
}

.profile-info .info-value {
    color: var(--secondary-color);
    font-size: 1em;
    word-break: break-all; /* Hosszú email/username tördelése */
    grid-column: 2; /* Mindig a második oszlopban */
}

/* Státusz kiemelése */
#account-status {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: capitalize; /* Nagy kezdőbetű */
}
#account-status[data-status="free"] { background-color: rgba(117, 117, 117, 0.1); color: var(--secondary-light); }
#account-status[data-status="max"] { background-color: rgba(99, 143, 17, 0.15); color: var(--primary-dark); }


/* Fiók Szerkesztő Űrlapok */
.account-section form .form-group {
    margin-bottom: 18px;
}

.account-section form label {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 0.9em;
}

.account-section form input[type="text"],
.account-section form input[type="email"], /* Bár email itt nem szerkeszthető */
.account-section form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--surface-color); /* Fehér háttér */
    color: var(--secondary-color);
}

.account-section form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 143, 17, 0.1);
}

.account-section form input:disabled {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

.account-section form button[type="submit"] {
    /* Alap gomb stílus öröklődik, de lehet finomítani */
    padding: 10px 20px;
    margin-top: 10px;
}

/* Üzenetek az űrlapokban */
.form-message {
    display: none; /* JS kezeli a megjelenést */
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 0.9em;
    border: 1px solid transparent;
}

.form-message.success {
    background-color: rgba(99, 143, 17, 0.1); /* Halvány zöld */
    border-color: var(--success-color);
    color: var(--primary-dark);
}

.form-message.error {
    background-color: rgba(211, 47, 47, 0.08); /* Halvány piros */
    border-color: var(--error-color);
    color: var(--error-color);
}

/* Segédszöveg */
.account-section form small {
    display: block;
    font-size: 0.8em;
    color: var(--secondary-light);
    margin-top: 5px;
}

/* Bejelentkezett / Kijelentkezett elemek kezelése CSS-sel is (JS mellett) */
.logged-in-only { display: none !important; } /* Alapból rejtve */
.logged-out-only { display: flex !important; } /* Alapból látható (inline-flex is lehet) */

body.logged-in .logged-in-only { display: flex !important; } /* Vagy inline-flex, ami kell */
body.logged-in .logged-out-only { display: none !important; }

/* Specifikus elemek igazítása, ha kell */
body.logged-in .nav-menu a.logged-in-only { display: flex; }
body.logged-in #account-actions-desktop .logged-in-only { display: flex; }

/* ÚJ: Specifikus stílus a 'Saját fiók' menü linkhez hover és active állapotban */
.nav-menu a[data-section="account"]:hover,
.nav-menu a[data-section="account"].active {
  background-color: #7AB830; /* Kicsit világosabb zöld, mint a --primary-color (#638f11) */
  color: white; /* Szöveg színe maradjon fehér */
  /* Az egyéb hover/active effektek (transform, box-shadow) öröklődnek vagy itt újra megadhatók */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Új Stílusok a Saját Fiók - Előfizetés Részleteihez */
.subscription-details-block {
    margin-top: 25px; /* Térköz a profil adatok után */
    padding: 15px 20px;
    background-color: #f9f9f9; /* Enyhén eltérő háttér */
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 0.95em;
    line-height: 1.6;
}

.subscription-details-block h4 {
    margin-bottom: 10px;
    color: var(--primary-dark);
    font-size: 1.1em;
}

.subscription-details-block p {
    margin-bottom: 10px;
    color: var(--secondary-color);
}
.subscription-details-block p:last-child {
    margin-bottom: 0;
}

.subscription-details-block strong {
    color: var(--primary-color); /* Kiemelés a fő színnel */
}

.subscription-details-block ul {
    list-style: disc; /* Pontok a listához */
    padding-left: 25px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.subscription-details-block li {
    margin-bottom: 5px;
}

/* Külön stílus a frissítési gombhoz */
#upgrade-to-max-btn {
    display: inline-block; /* Ne foglalja el a teljes sort */
    margin-top: 15px;
    padding: 8px 18px; /* Kicsit kisebb gomb */
    font-size: 0.9em;
}

/* Opcionális: Kiemelés Max csomagnál */
.profile-info[data-status="max"] .subscription-details-block {
    border-left: 4px solid var(--primary-color);
    background-color: rgba(99, 143, 17, 0.03); /* Nagyon halvány zöld háttér */
}

/* Előfizetés Modál Stílusok */
.subscription-info-container {
    margin-top: 20px;
}

.subscription-info-container .info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
}
.subscription-info-container .info-item:last-child {
    border-bottom: none;
}

.subscription-info-container .info-label {
    font-weight: 500;
    color: var(--secondary-light);
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px; /* Kis térköz a label és value között */
}

.subscription-info-container .info-label i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
    flex-shrink: 0; /* Ne zsugorodjon az ikon */
}

.subscription-info-container .info-value.modal-value { /* Új class a jobb szelektivitásért */
    color: var(--secondary-color);
    font-size: 1em;
    font-weight: bold;
    text-align: right; /* Érték jobbra igazítva */
}

.subscription-info-container hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0;
}

.subscription-info-container h4 {
    color: var(--primary-dark);
    font-size: 1.1em;
    margin-bottom: 10px;
}

.subscription-info-container .sub-note {
    font-size: 0.85em;
    color: var(--secondary-light);
    margin-top: 8px;
    text-align: center;
}

#modal-upgrade-btn {
    width: 100%; /* Teljes szélességű gomb a modalban */
}

/* Státusz kiemelése a modalban is */
#modal-sub-package[data-status="free"] { color: var(--secondary-light); }
#modal-sub-package[data-status="max"] { color: var(--primary-dark); }


.plan-selection { margin-bottom: 15px; }
.plan-selection label { display: block; margin-bottom: 8px; font-weight: 500; }
.radio-group label { display: flex; align-items: center; margin-bottom: 8px; font-weight: normal; cursor: pointer; }
.radio-group input[type="radio"] { margin-right: 8px; cursor: pointer; accent-color: var(--primary-color); }

/* Checkbox label stílus (opcionális, ha szebb inline checkbox kell) */
.inline-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
}
.inline-checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--primary-color); /* Böngésző alap checkbox színezése */
}

/* Számlázási adatok mezői (regisztráció és szerkesztés) */
.billing-info-fields {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.billing-info-fields .radio-group label { margin-bottom: 5px; }
.billing-info-fields textarea { min-height: 60px; }

/* Saját fiók - Számlázási adatok megjelenítése */
.account-section.billing-info-display {
    /* Meglévő .account-section stílusokat örökli */
}
#billing-display-content .info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 15px;
    align-items: baseline;
}
#billing-display-content .info-item {
    display: contents;
    padding-bottom: 0;
    border-bottom: none;
}
#billing-display-content .info-label {
    font-weight: 500;
    color: var(--secondary-light);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#billing-display-content .info-label i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
}
#billing-display-content .info-value {
    font-weight: normal;
    color: var(--secondary-color);
    word-break: break-all;
}

/* Saját fiók - Gombok */
.small {
    padding: 6px 12px !important;
    font-size: 0.85em !important;
}
.btn.danger {
    background-color: var(--error-color);
    color: white;
}
.btn.danger:hover {
    background-color: #b71c1c;
}

/* Saját fiók - Szerkesztő szekció */
.account-section.billing-info-edit {
    /* Meglévő .account-section stílusokat örökli */
    border-color: var(--primary-light);
}
#update-billing-form .button-group {
    margin-top: 20px;
    justify-content: flex-start;
}
/* Specifikusan a számlázási adatok szerkesztő formjának gombcsoportja */
#update-billing-form .button-group {
    display: flex;
    align-items: center; /* Biztosítja a vertikális középre igazítást */
    gap: 10px; /* Térköz a gombok között */
    margin-top: 20px; /* Térköz a form többi részétől */
    justify-content: flex-start; /* Gombok balra igazítása */
}

/* Biztosítjuk, hogy a gomboknak ne legyen felesleges vertikális margója */
#update-billing-form .button-group .btn {
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle; /* Segíthet az inline-flex elemeknél */
}
/* styles.css - ÚJ SZABÁLY HOZZÁADÁSA */

/* Számlázási cím textarea hátterének beállítása a szerkesztő formon belül */
#update-billing-form textarea#edit-billing-address {
    background-color: var(--surface-color);
    color: var(--secondary-color);
    height: 100px !important;
}

/* Opcionális: Fókusz állapot finomítása, ha szükséges
   (Valószínűleg az általános textarea:focus szabály elég, de ha mégsem:) */
#update-billing-form textarea#edit-billing-address:focus {
     border-color: var(--primary-color); /* Fókusz szegélyszín */
     box-shadow: 0 0 0 3px rgba(99, 143, 17, 0.1); /* Fókusz árnyék */
     /* Background color itt általában nem változik */
}

/* styles.css */

#font-download-section {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
height: 100%;
}

#font-download-section p {
    margin-bottom: 15px;
    font-size: 0.95em;
    line-height: 1.5;
}

#font-download-section .btn {
    margin-top: 5px;
    margin-bottom: 1px;
        width: 100%;
}

/* A kötelező jelző (csillag) stílusa */
.required-indicator {
    color: var(--primary-color);
    font-weight: bold;
    margin-left: 4px;      /* Kis térköz a címke szövegétől */
    display: inline-block; /* Fontos a láthatóság váltásához */
}


/* Style for the placeholder when the input is disabled */
#input:disabled::placeholder,
#input.disabled-placeholder::placeholder {
    color: var(--secondary-light); /* Vagy egy specifikusabb szürke szín */
    font-style: italic;
    opacity: 0.7; /* Kicsit halványabb */
}

/* Optional: Change background when disabled */
#input:disabled {
    background-color: #f8f8f8; /* Enyhén szürke háttér */
    cursor: not-allowed; /* Jelzi, hogy nem használható */
}
.logo-link {
    display: inline-block; /* Megtartja az inline viselkedést, de méretezhető */
    height: 100%;          /* Kitölti a szülő logo-container magasságát */
    line-height: 0;        /* Eltávolítja az extra helyet a kép alatt/felett, ha inline-block */
    vertical-align: middle; /* Igazítás, ha a logo-container is flex-es */
    text-decoration: none; /* Ne legyen aláhúzás */
}

/* Akadálymentességi fókusz jelzés */
.logo-link:focus {
    outline: none; /* Fókusz stílus a témához igazítva */
    /* outline: 2px solid var(--accent-color); /* Fókusz stílus a témához igazítva */
   /* outline-offset: 2px; /* Kis távolság az outline és az elem között */
   /* border-radius: 3px; /* Opcionális: lekerekített outline */
}

.logo-link img { /* Biztosítjuk, hogy a kép jól jelenjen meg a linkben */
   display: block; /* Eltávolítja az extra helyet a kép alatt */
   height: 100%;   /* A kép magassága a linkéhez (és így a konténeréhez) igazodik */
   width: auto;    /* Az arányok megtartása */
}

/* --- Braille Konverter Csomag Összehasonlító Stílusok (Adaptált) --- */

.kolibri-comparison {
    max-width: none; /* Megtarthatjuk, hogy középre kerüljön az about-content-en belül */
    margin: 30px auto; /* Nagyobb margó felül-alul, hogy elkülönüljön */
    background-color: transparent; /* Illeszkedik az .about-content hátteréhez */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Finom árnyék, mint a többi konténeren */
    overflow: hidden;
    font-family: var(--font-family-base); /* Alkalmazás alap betűtípusa */
    line-height: 1.6;
    color: var(--secondary-color); /* Alkalmazás alap szövegszíne */
}

.kolibri-comparison h2 {
    text-align: center;
    padding: 15px 20px; /* Kisebb padding a címnek */
    margin: 0;
    color: white; /* Szöveg a fő színen */
    background-color: var(--primary-color); /* Alkalmazás fő zöld színe */
    font-size: 1.2em; /* Illeszkedő méret */
}

.kolibri-comparison .comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.kolibri-comparison .comparison-table th,
.kolibri-comparison .comparison-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0; /* Konzisztens szegélyszín */
    vertical-align: middle;
}

.kolibri-comparison .comparison-table thead th {
    background-color: var(--background-color); /* Alkalmazás világos háttérszíne */
    font-weight: 600;
    color: var(--secondary-light); /* Alkalmazás másodlagos (világosabb) szövegszíne */
    text-align: center;
}
.kolibri-comparison .comparison-table thead th:first-child {
    text-align: left;
}

.kolibri-comparison .comparison-table tbody tr {
    background-color: #ececec;
}

.kolibri-comparison .comparison-table tbody tr:nth-child(even) {
    background-color: var(--background-color); /* Páros sorok háttere (világosszürke) */
}

.kolibri-comparison .comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.kolibri-comparison .comparison-table td:nth-child(2), /* FREE oszlop */
.kolibri-comparison .comparison-table td:nth-child(3) { /* MAX oszlop */
    text-align: center;
}

.kolibri-comparison .check-icon {
    color: var(--primary-color);
    font-size: 1.2em;
    margin-right: 5px;
    vertical-align: middle;
}
.kolibri-comparison .times-icon {
    color: #ccc; /* Standard inaktív szín */
    font-size: 1.2em;
    margin-right: 5px;
    vertical-align: middle;
}

/* MAX csomag oszlop kiemelése */
.kolibri-comparison .comparison-table thead th:nth-child(3),
.kolibri-comparison .comparison-table td:nth-child(3) {
    background-color: rgba(99, 143, 17, 0.05); /* Eredeti kiemelő szín (halvány zöld) */
    font-weight: 500;
}

/* FREE csomag oszlop (opcionális) kiemelése */
.kolibri-comparison .comparison-table thead th:nth-child(2),
.kolibri-comparison .comparison-table td:nth-child(2) {
  background-color: #f8feee; /* Nagyon halvány szürke, hogy kicsit eltérjen a MAX-tól és a páros soroktól */
}


.kolibri-comparison .comparison-table a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.kolibri-comparison .comparison-table a:hover {
    text-decoration: underline;
}

/* Reszponzivitás - változatlan maradhat, mert jól illeszkedik */
@media (max-width: 600px) {
    .kolibri-comparison .comparison-table th,
    .kolibri-comparison .comparison-table td {
        padding: 8px 10px;
        font-size: 0.9em;
    }
    .kolibri-comparison h2 {
        font-size: 1em;
        padding: 12px 15px;
    }
    .kolibri-comparison .check-icon,
    .kolibri-comparison .times-icon {
        font-size: 1em;
    }
}

.radio-option-label .introductory-price-label {
    font-weight: normal; /* Ne legyen félkövér, mint a többi szöveg a labelben */
    font-size: 0.85em;   /* Kicsit kisebb betűméret */
    color: var(--primary-color); /* Használhatjuk a fő zöld színt, vagy egy másodlagosat */
    margin-left: 5px;    /* Kis térköz az ár után */
    /* white-space: nowrap;  /* Ha azt akarod, hogy ne törjön sorba */
}

/* --- Braille Konverter Csomag Összehasonlító Stílusok (Adaptált) VÉGE --- */

    </style>