/* ============================================
   ÉLETMÓDVÁLTÁS EGYSZERŰEN — Stíluslap
   Verzió: 1.0.0
   ============================================ */

/* --------------------------------------------
   CSS VÁLTOZÓK — Design tokens
   -------------------------------------------- */
:root {
    /* Elsődleges szín — friss zöld */
    --primer:         #2ECC71;
    --primer-sotet:   #27AE60;
    --primer-vilagos: #A8E6CF;
    --primer-hatter:  #F0FFF4;

    /* Másodlagos szín — mélykék */
    --masodik:        #2C3E50;
    --masodik-vilagos:#34495E;

    /* Hangsúly szín — korall */
    --hangsuly:       #E74C3C;
    --hangsuly-vilagos:#FADBD8;

    /* Figyelmeztető */
    --figyelmeztet:   #F39C12;
    --figyelmeztet-vilagos: #FDEBD0;

    /* Szürke skála */
    --szurke-50:  #F9FAFB;
    --szurke-100: #F3F4F6;
    --szurke-200: #E5E7EB;
    --szurke-300: #D1D5DB;
    --szurke-400: #9CA3AF;
    --szurke-500: #6B7280;
    --szurke-600: #4B5563;
    --szurke-700: #374151;
    --szurke-800: #1F2937;
    --szurke-900: #111827;

    /* Tipográfia */
    --font-alap:  'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-meret: 18px;
    --sor-magassag: 1.6;

    /* Térközök */
    --ter-xs:  4px;
    --ter-s:   8px;
    --ter-m:   16px;
    --ter-l:   24px;
    --ter-xl:  32px;
    --ter-xxl: 48px;

    /* Lekerekítés */
    --radius-s:  6px;
    --radius-m:  12px;
    --radius-l:  20px;
    --radius-xl: 30px;

    /* Árnyékok */
    --arnyek-s: 0 1px 3px rgba(0,0,0,0.08);
    --arnyek-m: 0 4px 12px rgba(0,0,0,0.10);
    --arnyek-l: 0 8px 24px rgba(0,0,0,0.12);

    /* Animáció */
    --atm-gyors:  0.15s ease;
    --atm-normal: 0.25s ease;
    --atm-lassu:  0.4s ease;

    /* Layout */
    --max-szeles: 480px;
    --nav-magassag: 64px;
    --top-magassag: 56px;
}

/* --------------------------------------------
   RESET + ALAP
   -------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-meret);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-alap);
    line-height: var(--sor-magassag);
    color: var(--szurke-800);
    background: var(--szurke-100);
    min-height: 100vh;
}

a {
    color: var(--primer);
    text-decoration: none;
    transition: color var(--atm-gyors);
}

a:hover { color: var(--primer-sotet); }

img { max-width: 100%; display: block; }

button { cursor: pointer; font-family: inherit; }

input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

/* --------------------------------------------
   AUTH OLDALAK
   -------------------------------------------- */
.auth-oldal {
    background: linear-gradient(135deg, #1a4731 0%, #2ECC71 50%, #27AE60 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--ter-m);
}

.auth-container {
    width: 100%;
    max-width: 400px;
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--ter-xl);
    color: white;
}

.logo-kor {
    width: 72px;
    height: 72px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto var(--ter-m);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
}

.auth-logo h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--ter-s);
}

.auth-logo h1 span {
    font-weight: 300;
    opacity: 0.9;
}

.auth-logo p {
    opacity: 0.85;
    font-size: 0.95rem;
}

.auth-kartya {
    background: white;
    border-radius: var(--radius-l);
    padding: var(--ter-xl);
    box-shadow: var(--arnyek-l);
}

.auth-kartya h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--masodik);
    margin-bottom: var(--ter-l);
    text-align: center;
}

.auth-link {
    text-align: center;
    margin-top: var(--ter-l);
    color: var(--szurke-500);
    font-size: 0.9rem;
}

.auth-link a {
    font-weight: 600;
}

/* --------------------------------------------
   FORM ELEMEK
   -------------------------------------------- */
.form-csoport {
    margin-bottom: var(--ter-m);
}

.form-csoport label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--szurke-700);
    margin-bottom: var(--ter-xs);
}

.form-csoport input,
.form-csoport select,
.form-csoport textarea {
    width: 100%;
    padding: 12px var(--ter-m);
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-m);
    font-size: 1rem;
    color: var(--szurke-800);
    background: var(--szurke-50);
    transition: border-color var(--atm-gyors), box-shadow var(--atm-gyors);
    outline: none;
}

.form-csoport input:focus,
.form-csoport select:focus,
.form-csoport textarea:focus {
    border-color: var(--primer);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
    background: white;
}

.form-csoport textarea {
    resize: vertical;
    min-height: 100px;
}

.hiba-uzenet {
    background: var(--hangsuly-vilagos);
    color: var(--hangsuly);
    border: 1px solid #F5C6CB;
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    margin-bottom: var(--ter-m);
    font-size: 0.9rem;
    font-weight: 500;
}

.siker-uzenet {
    background: var(--primer-hatter);
    color: var(--primer-sotet);
    border: 1px solid var(--primer-vilagos);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    margin-bottom: var(--ter-m);
    font-size: 0.9rem;
    font-weight: 500;
}

/* --------------------------------------------
   GOMBOK
   -------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ter-s);
    padding: 12px var(--ter-l);
    border-radius: var(--radius-m);
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all var(--atm-gyors);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primer {
    background: var(--primer);
    color: white;
    border-color: var(--primer);
}

.btn-primer:hover {
    background: var(--primer-sotet);
    border-color: var(--primer-sotet);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46,204,113,0.35);
}

.btn-masodik {
    background: white;
    color: var(--masodik);
    border-color: var(--szurke-200);
}

.btn-masodik:hover {
    border-color: var(--primer);
    color: var(--primer);
}

.btn-veszelyes {
    background: white;
    color: var(--hangsuly);
    border-color: var(--hangsuly);
}

.btn-veszelyes:hover {
    background: var(--hangsuly);
    color: white;
}

.btn-teljes { width: 100%; }

.btn-kicsi {
    padding: 6px var(--ter-m);
    font-size: 0.875rem;
}

/* --------------------------------------------
   LAYOUT — Főoldal struktúra
   -------------------------------------------- */
.app-wrapper {
    max-width: var(--max-szeles);
    margin: 0 auto;
    min-height: 100vh;
    background: white;
    position: relative;
}

.top-bar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-szeles);
    height: var(--top-magassag);
    background: white;
    border-bottom: 1px solid var(--szurke-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ter-m);
    z-index: 100;
    box-shadow: var(--arnyek-s);
}

.top-bar-logo {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    font-weight: 700;
    color: var(--masodik);
    font-size: 1rem;
}

.top-bar-logo .logo-pont {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.top-bar-jobb {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
}

.avatar-gomb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.fo-tartalom {
    padding-top: calc(var(--top-magassag) + var(--ter-m));
    padding-bottom: calc(var(--nav-magassag) + var(--ter-m));
    padding-left: var(--ter-m);
    padding-right: var(--ter-m);
}

/* --------------------------------------------
   BOTTOM NAVIGÁCIÓ
   -------------------------------------------- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-szeles);
    height: var(--nav-magassag);
    background: white;
    border-top: 1px solid var(--szurke-100);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}

.nav-elem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    color: var(--szurke-400);
    text-decoration: none;
    transition: color var(--atm-gyors);
    flex: 1;
    min-width: 0;
    font-size: 0.62rem;
    font-weight: 500;
}

button.nav-elem {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    margin: 0;
    outline: none;
}

.nav-elem .nav-ikon {
    font-size: 1.4rem;
    line-height: 1;
}

.nav-elem.aktiv,
.nav-elem:hover {
    color: var(--primer);
}

.nav-elem.aktiv .nav-ikon {
    transform: scale(1.1);
}

/* FAB — Rögzítés gomb */
.fab-gomb {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
    color: white;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 4px 16px rgba(46,204,113,0.4);
    transition: all var(--atm-gyors);
    cursor: pointer;
    margin-top: -20px;
}

.fab-gomb:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(46,204,113,0.5);
}

/* --------------------------------------------
   KÁRTYÁK
   -------------------------------------------- */
.kartya {
    background: white;
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    box-shadow: var(--arnyek-s);
    border: 1px solid var(--szurke-100);
    margin-bottom: var(--ter-m);
}

.kartya-cim {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--szurke-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ter-s);
}

.kartya-ertek {
    font-size: 2rem;
    font-weight: 700;
    color: var(--masodik);
    line-height: 1.1;
}

.kartya-egyseg {
    font-size: 0.9rem;
    color: var(--szurke-400);
    font-weight: 400;
}

/* Összesítő kártyák rácsban */
.kartya-racs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ter-m);
    margin-bottom: var(--ter-m);
}

.kartya-szines {
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    color: white;
}

.kartya-zold  { background: linear-gradient(135deg, #2ECC71, #27AE60); }
.kartya-kek   { background: linear-gradient(135deg, #3498DB, #2980B9); }
.kartya-lila  { background: linear-gradient(135deg, #9B59B6, #8E44AD); }
.kartya-narancs { background: linear-gradient(135deg, #F39C12, #D68910); }
.kartya-teal  { background: linear-gradient(135deg, #1ABC9C, #16A085); }
.kartya-piros { background: linear-gradient(135deg, #E74C3C, #C0392B); }

.kartya-szines .kartya-cim { color: rgba(255,255,255,0.8); }
.kartya-szines .kartya-ertek { color: white; font-size: 1.6rem; }

/* --------------------------------------------
   PROGRESS BAR
   -------------------------------------------- */
.progress-sor {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    margin-bottom: var(--ter-s);
}

.progress-cimke {
    font-size: 0.875rem;
    color: var(--szurke-600);
    min-width: 80px;
}

.progress-sav {
    flex: 1;
    height: 8px;
    background: var(--szurke-100);
    border-radius: 99px;
    overflow: hidden;
}

.progress-tolto {
    height: 100%;
    border-radius: 99px;
    background: var(--primer);
    transition: width var(--atm-lassu);
}

.progress-szazalek {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--szurke-500);
    min-width: 36px;
    text-align: right;
}

/* Színes progress */
.progress-tolto.zold  { background: var(--primer); }
.progress-tolto.narancs { background: var(--figyelmeztet); }
.progress-tolto.piros { background: var(--hangsuly); }

/* --------------------------------------------
   TOAST ÉRTESÍTŐ
   -------------------------------------------- */
.toast-container {
    position: fixed;
    top: calc(var(--top-magassag) + var(--ter-m));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2 * var(--ter-m));
    max-width: calc(var(--max-szeles) - 2 * var(--ter-m));
    z-index: 999;
    pointer-events: none;
}

.toast {
    background: var(--masodik);
    color: white;
    padding: var(--ter-m) var(--ter-l);
    border-radius: var(--radius-m);
    margin-bottom: var(--ter-s);
    box-shadow: var(--arnyek-l);
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--atm-normal);
    pointer-events: auto;
}

.toast.latszik {
    opacity: 1;
    transform: translateY(0);
}

.toast.siker { background: var(--primer-sotet); }
.toast.hiba  { background: var(--hangsuly); }
.toast.info  { background: #3498DB; }

/* --------------------------------------------
   MODAL
   -------------------------------------------- */
.modal-hatter {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modal-hatter.latszik {
    display: flex;
}

.modal-panel {
    background: white;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    padding: var(--ter-l);
    width: 100%;
    max-width: var(--max-szeles);
    max-height: 90vh;
    overflow-y: auto;
    animation: modal-felcsusz var(--atm-normal);
}

@keyframes modal-felcsusz {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.modal-huzo {
    width: 40px;
    height: 4px;
    background: var(--szurke-200);
    border-radius: 99px;
    margin: 0 auto var(--ter-l);
}

.modal-cim {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--masodik);
    margin-bottom: var(--ter-l);
    text-align: center;
}

/* --------------------------------------------
   LISTA ELEMEK (napló bejegyzések)
   -------------------------------------------- */
.lista-elem {
    display: flex;
    align-items: center;
    gap: var(--ter-m);
    padding: var(--ter-m) 0;
    border-bottom: 1px solid var(--szurke-100);
}

.lista-elem:last-child { border-bottom: none; }

.lista-ikon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.lista-tartalom {
    flex: 1;
    min-width: 0;
}

.lista-fo {
    font-weight: 600;
    color: var(--masodik);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lista-masod {
    font-size: 0.8rem;
    color: var(--szurke-400);
    margin-top: 2px;
}

.lista-jobb {
    text-align: right;
    flex-shrink: 0;
}

/* --------------------------------------------
   BADGE-EK
   -------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-zold   { background: var(--primer-hatter); color: var(--primer-sotet); }
.badge-piros  { background: var(--hangsuly-vilagos); color: var(--hangsuly); }
.badge-narancs { background: var(--figyelmeztet-vilagos); color: var(--figyelmeztet); }
.badge-szurke { background: var(--szurke-100); color: var(--szurke-500); }

/* --------------------------------------------
   SZEKCIÓ FEJLÉC
   -------------------------------------------- */
.szekcion-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ter-m);
}

.szekcion-cim {
    font-size: 1rem;
    font-weight: 700;
    color: var(--masodik);
}

.szekcion-link {
    font-size: 0.85rem;
    color: var(--primer);
    font-weight: 600;
}

/* --------------------------------------------
   ÜRES ÁLLAPOT
   -------------------------------------------- */
.ures-allapot {
    text-align: center;
    padding: var(--ter-xxl) var(--ter-m);
    color: var(--szurke-400);
}

.ures-allapot .ures-ikon {
    font-size: 3rem;
    margin-bottom: var(--ter-m);
    opacity: 0.5;
}

.ures-allapot p {
    font-size: 0.95rem;
    margin-bottom: var(--ter-m);
}

/* --------------------------------------------
   SEGÉDOSZTÁLYOK
   -------------------------------------------- */
.latszik { display: flex !important; }
.rejtett { display: none !important; }

.kozep { text-align: center; }
.jobbra { text-align: right; }

.szoveg-primer  { color: var(--primer); }
.szoveg-veszelyes { color: var(--hangsuly); }
.szoveg-figyelmeztet { color: var(--figyelmeztet); }
.szoveg-szurke  { color: var(--szurke-400); }

.vastag { font-weight: 700; }
.kicsi  { font-size: 0.875rem; }
.nagy   { font-size: 1.1rem; }

.mb-s  { margin-bottom: var(--ter-s); }
.mb-m  { margin-bottom: var(--ter-m); }
.mb-l  { margin-bottom: var(--ter-l); }
.mt-m  { margin-top: var(--ter-m); }
.mt-l  { margin-top: var(--ter-l); }

/* --------------------------------------------
   RÖGZÍTÉS MODAL RÁCS
   -------------------------------------------- */
.rogzites-racs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-s);
    padding-bottom: var(--ter-m);
}

.rogzites-elem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ter-xs);
    padding: var(--ter-m) var(--ter-s);
    border-radius: var(--radius-m);
    background: var(--szurke-50);
    border: 2px solid var(--szurke-100);
    color: var(--masodik);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--atm-gyors);
}

.rogzites-elem:hover,
.rogzites-elem:active {
    background: var(--primer-hatter);
    border-color: var(--primer);
    color: var(--primer-sotet);
}

.rogzites-ikon {
    font-size: 1.8rem;
    line-height: 1;
}

/* --------------------------------------------
   FŐOLDAL SPECIFIKUS
   -------------------------------------------- */
.koszonto-szekcion {
    background: linear-gradient(135deg, #1a4731 0%, #2ECC71 100%);
    border-radius: var(--radius-l);
    padding: var(--ter-l);
    margin-bottom: var(--ter-m);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ter-m);
}

.koszonto-nap {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: var(--ter-xs);
}

.koszonto-szekcion h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: var(--ter-xs);
}

.koszonto-motivacio {
    font-size: 0.85rem;
    opacity: 0.85;
    font-style: italic;
}

.napi-pont-kor {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pont-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pont-szam {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    position: relative;
    line-height: 1;
}

.pont-felirat {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.8);
    position: relative;
}

.kartya-al {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: var(--ter-xs);
}

/* Makró sor */
.makro-sor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-m);
}

.makro-elem {
    text-align: center;
}

.makro-ertek {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--masodik);
}

.makro-cimke {
    font-size: 0.75rem;
    color: var(--szurke-400);
    margin-bottom: var(--ter-xs);
}

.makro-sav {
    height: 6px;
    background: var(--szurke-100);
    border-radius: 99px;
    overflow: hidden;
}

.makro-tolto {
    height: 100%;
    border-radius: 99px;
    transition: width var(--atm-lassu);
}

.makro-kek    { background: #3498DB; }
.makro-narancs { background: var(--figyelmeztet); }
.makro-zold   { background: var(--primer); }

/* Gyors navigáció */
.gyors-nav-racs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ter-s);
}

.gyors-nav-elem {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    padding: var(--ter-m);
    background: var(--szurke-50);
    border: 2px solid var(--szurke-100);
    border-radius: var(--radius-m);
    color: var(--masodik);
    font-size: 0.9rem;
    min-width: 0;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--atm-gyors);
}

.gyors-nav-elem:hover {
    background: var(--primer-hatter);
    border-color: var(--primer);
    color: var(--primer-sotet);
}

.gyors-nav-elem span:first-child {
    font-size: 1.3rem;
}

/* --------------------------------------------
   VARÁZSLÓ
   -------------------------------------------- */
.varazslol-container {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: var(--ter-m);
}

.varazslol-leiras {
    color: var(--szurke-500);
    font-size: 0.9rem;
    margin-bottom: var(--ter-l);
}

.lepesjelzo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ter-l);
    gap: 0;
}

.lepesjelzo-elem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lepesjelzo-kor {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--szurke-200);
    color: var(--szurke-400);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--atm-normal);
}

.lepesjelzo-elem.aktiv .lepesjelzo-kor {
    background: var(--primer);
    color: white;
    box-shadow: 0 0 0 4px rgba(46,204,113,0.2);
}

.lepesjelzo-elem.kesz .lepesjelzo-kor {
    background: var(--primer-sotet);
    color: white;
}

.lepesjelzo-szoveg {
    font-size: 0.7rem;
    color: var(--szurke-400);
    font-weight: 600;
}

.lepesjelzo-elem.aktiv .lepesjelzo-szoveg,
.lepesjelzo-elem.kesz .lepesjelzo-szoveg {
    color: var(--primer-sotet);
}

.lepesjelzo-vonal {
    height: 2px;
    width: 40px;
    background: var(--szurke-200);
    margin-bottom: 18px;
    transition: background var(--atm-normal);
}

.lepesjelzo-vonal.kesz {
    background: var(--primer);
}

.form-sor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ter-m);
}

.gomb-sor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ter-m);
    margin-top: var(--ter-m);
}

.csuszka-csoport {
    display: flex;
    align-items: center;
    gap: var(--ter-m);
}

.csuszka-csoport input[type="range"] {
    flex: 1;
    accent-color: var(--primer);
    height: 6px;
    border: none;
    background: none;
    padding: 0;
}

.csuszka-ertek {
    font-weight: 700;
    color: var(--masodik);
    min-width: 80px;
    text-align: right;
    font-size: 0.9rem;
}

.csuszka-javaslatok {
    display: flex;
    gap: var(--ter-s);
    margin-top: var(--ter-s);
    flex-wrap: wrap;
}

.javasolt-btn {
    padding: 4px 10px;
    border-radius: 99px;
    border: 2px solid var(--szurke-200);
    background: white;
    color: var(--szurke-500);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--atm-gyors);
}

.javasolt-btn.aktiv,
.javasolt-btn:hover {
    border-color: var(--primer);
    color: var(--primer);
    background: var(--primer-hatter);
}

.makro-celok {
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
}

.makro-cel-elem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ter-s) var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-m);
}

.makro-cel-cimke {
    font-weight: 600;
    color: var(--masodik);
    font-size: 0.9rem;
}

.makro-cel-input {
    width: 60px;
    text-align: center;
    padding: 4px 8px;
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-s);
    font-size: 0.95rem;
    font-weight: 700;
}

.form-segitseg {
    font-size: 0.8rem;
    color: var(--szurke-400);
    margin-top: var(--ter-xs);
}

.info-doboz {
    background: var(--primer-hatter);
    border: 1px solid var(--primer-vilagos);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    margin-bottom: var(--ter-m);
    font-size: 0.875rem;
    color: var(--masodik);
}

.info-doboz ol {
    margin-top: var(--ter-s);
    padding-left: var(--ter-l);
}

.info-doboz li {
    margin-bottom: 4px;
}

.checkbox-csoport {
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
}

.checkbox-cimke {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    padding: var(--ter-s) var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-m);
    cursor: pointer;
    font-weight: 500;
    border: 2px solid transparent;
    transition: all var(--atm-gyors);
}

.checkbox-cimke:hover {
    border-color: var(--primer);
    background: var(--primer-hatter);
}

.checkbox-cimke input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primer);
    flex-shrink: 0;
}

/* --------------------------------------------
   NAPLÓ OLDAL
   -------------------------------------------- */

/* Dátum navigáció */
.datum-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ter-s) var(--ter-m);
    background: white;
    border-bottom: 1px solid var(--szurke-100);
    margin: 0 calc(-1 * var(--ter-m));
    margin-top: calc(-1 * var(--ter-m));
    position: sticky;
    top: var(--top-magassag);
    z-index: 50;
}

.datum-nav-nyil {
    font-size: 1.6rem;
    color: var(--primer);
    padding: 4px 12px;
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
}

.datum-nav-kozep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.datum-valaszto {
    border: none;
    background: transparent;
    font-size: 0.8rem;
    color: var(--szurke-400);
    cursor: pointer;
    padding: 0;
    text-align: center;
    width: 130px;
}

.datum-nav-szoveg {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--masodik);
}

/* Tab navigáció */
.tab-nav-kontener {
    overflow-x: auto;
    margin: 0 calc(-1 * var(--ter-m));
    border-bottom: 2px solid var(--szurke-100);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: calc(var(--top-magassag) + 52px);
    z-index: 40;
    background: white;
}

.tab-nav-kontener::-webkit-scrollbar { display: none; }

.tab-nav {
    display: flex;
    gap: 0;
    padding: 0 var(--ter-m);
    white-space: nowrap;
}

.tab-elem {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--ter-s) var(--ter-m);
    color: var(--szurke-400);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all var(--atm-gyors);
    margin-bottom: -2px;
    flex-shrink: 0;
}

.tab-ikon {
    font-size: 1.3rem;
    line-height: 1;
}

.tab-cim {
    font-size: 0.65rem;
    line-height: 1;
}

.tab-elem.aktiv {
    color: var(--primer);
    border-bottom-color: var(--primer);
}

.tab-elem:hover {
    color: var(--primer-sotet);
}

/* Napló tartalom */
.naplo-tartalom {
    padding-top: var(--ter-m);
}

/* Form fejcím */
.form-cim {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--masodik);
    margin-bottom: var(--ter-m);
}

/* Napló form kártya */
.naplo-form {
    margin-bottom: var(--ter-m);
}

/* Törlés gomb */
.torles-gomb {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0.4;
    padding: 4px 8px;
    border-radius: var(--radius-s);
    transition: all var(--atm-gyors);
    flex-shrink: 0;
}

.torles-gomb:hover {
    opacity: 1;
    background: var(--hangsuly-vilagos);
}

/* Lista elem animáció */
.lista-elem {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Üres állapot (kis változat) */
.ures-allapot-mini {
    text-align: center;
    padding: var(--ter-l) var(--ter-m);
    color: var(--szurke-400);
    font-size: 0.9rem;
}

/* Stat sor */
.stat-sor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-s);
    margin-bottom: var(--ter-m);
}

.stat-kocka {
    background: var(--szurke-50);
    border: 1px solid var(--szurke-100);
    border-radius: var(--radius-m);
    padding: var(--ter-m) var(--ter-s);
    text-align: center;
}

.stat-kocka.kiemel {
    background: var(--primer-hatter);
    border-color: var(--primer-vilagos);
}

.stat-ertek {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--masodik);
    line-height: 1.1;
}

.stat-cimke {
    font-size: 0.65rem;
    color: var(--szurke-400);
    margin-top: 2px;
    font-weight: 500;
}

/* Folyadék progress */
.folyadek-progress {
    background: white;
    border: 1px solid var(--szurke-100);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    margin-bottom: var(--ter-m);
    box-shadow: var(--arnyek-s);
}

.fp-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ter-s);
}

.fp-ertek {
    font-weight: 700;
    color: var(--masodik);
    font-size: 1.1rem;
}

.fp-cel {
    font-size: 0.8rem;
    color: var(--szurke-400);
}

.fp-szazalek {
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primer);
    margin-top: 4px;
}

/* Folyadék gyors rács */
.folyadek-gyors-racs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-s);
}

.folyadek-gyors-gomb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--ter-s);
    background: var(--szurke-50);
    border: 2px solid var(--szurke-100);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: all var(--atm-gyors);
    font-family: inherit;
    font-size: 1.2rem;
    line-height: 1;
}

.folyadek-gyors-gomb:hover,
.folyadek-gyors-gomb:active {
    background: var(--primer-hatter);
    border-color: var(--primer);
}

/* Gyors lépés gombok */
.gyors-lepes-gomb-sor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-s);
}

.gyors-lepes-gomb {
    padding: var(--ter-s);
    background: var(--szurke-50);
    border: 2px solid var(--szurke-100);
    border-radius: var(--radius-m);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--szurke-600);
    transition: all var(--atm-gyors);
}

.gyors-lepes-gomb.aktiv,
.gyors-lepes-gomb:hover {
    background: var(--primer-hatter);
    border-color: var(--primer);
    color: var(--primer-sotet);
}

/* AI makró doboz */
.ai-makro-doboz {
    background: linear-gradient(135deg, #f0fff8, #e8f5e9);
    border: 1px solid var(--primer-vilagos);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    margin-bottom: var(--ter-m);
}

.ai-makro-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primer-sotet);
    margin-bottom: var(--ter-s);
}

.ai-allapot {
    font-size: 0.75rem;
    color: var(--szurke-500);
}

.ai-makro-racs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ter-s);
    text-align: center;
}

.ai-makro-ertek {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-makro-ertek span:first-child {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--masodik);
}

.ai-makro-cimke {
    font-size: 0.65rem;
    color: var(--szurke-400);
}

/* Kézi makrók details */
.kezi-makro-details {
    margin-bottom: var(--ter-m);
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.kezi-makro-details summary {
    padding: var(--ter-s) var(--ter-m);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--szurke-500);
    cursor: pointer;
    list-style: none;
    background: var(--szurke-50);
    user-select: none;
}

.kezi-makro-details summary::-webkit-details-marker { display: none; }
.kezi-makro-details summary::before { content: '▸ '; }
.kezi-makro-details[open] summary::before { content: '▾ '; }

.kezi-makro-details .form-sor {
    padding: 0 var(--ter-m);
}

/* Makró összesítő */
.makro-osszesito {
    margin-bottom: var(--ter-m);
}

/* Csillag választó (alvás minőség) */
.csillag-valaszto {
    display: flex;
    gap: var(--ter-s);
    flex-wrap: wrap;
    margin-bottom: var(--ter-s);
}

.csillag-gomb {
    padding: 6px 10px;
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-m);
    background: var(--szurke-50);
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    transition: all var(--atm-gyors);
}

.csillag-gomb.aktiv,
.csillag-gomb:hover {
    border-color: var(--primer);
    background: var(--primer-hatter);
}

/* Hangulat választó */
.hangulat-valaszto {
    display: flex;
    gap: var(--ter-s);
    justify-content: space-between;
    margin-bottom: var(--ter-xs);
}

.hangulat-gomb {
    flex: 1;
    font-size: 1.8rem;
    padding: var(--ter-s);
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-m);
    background: var(--szurke-50);
    cursor: pointer;
    transition: all var(--atm-gyors);
    line-height: 1;
}

.hangulat-gomb.aktiv,
.hangulat-gomb:hover {
    border-color: var(--primer);
    background: var(--primer-hatter);
    transform: scale(1.1);
}

.hangulat-felirat,
.stressz-felirat {
    font-size: 0.8rem;
    color: var(--primer-sotet);
    font-weight: 600;
    text-align: center;
    margin-top: 2px;
    margin-bottom: var(--ter-s);
}

/* Fő tartalom — napló oldalon nincs padding top (datum nav+tab miatt) */
.naplo-tartalom {
    padding-top: var(--ter-m);
}

/* --------------------------------------------
   STATISZTIKA OLDAL
   -------------------------------------------- */

/* Nézet választó */
.nezet-valaszto {
    display: flex;
    gap: var(--ter-s);
    margin-bottom: var(--ter-m);
    background: var(--szurke-100);
    border-radius: var(--radius-l);
    padding: 4px;
}

.nezet-gomb {
    flex: 1;
    text-align: center;
    padding: var(--ter-s) var(--ter-m);
    border-radius: var(--radius-m);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--szurke-500);
    text-decoration: none;
    transition: all var(--atm-gyors);
}

.nezet-gomb.aktiv {
    background: white;
    color: var(--masodik);
    box-shadow: var(--arnyek-s);
}

/* Összesítő kártyák sor */
.stat-osszesito-racs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ter-s);
    margin-bottom: var(--ter-m);
}

.stat-osszesito-kartya {
    background: white;
    border: 1px solid var(--szurke-100);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    box-shadow: var(--arnyek-s);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.ssk-ikon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 2px;
}

.ssk-ertek {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--masodik);
    line-height: 1.1;
}

.ssk-cimke {
    font-size: 0.7rem;
    color: var(--szurke-400);
    font-weight: 500;
}

.ssk-badge {
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
}

/* Diagram kártya */
.diagram-kartya {
    background: white;
    border: 1px solid var(--szurke-100);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    margin-bottom: var(--ter-m);
    box-shadow: var(--arnyek-s);
    overflow: hidden;
}

.diagram-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--ter-m);
}

.diagram-cim {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--masodik);
}

.diagram-al {
    font-size: 0.75rem;
    color: var(--szurke-400);
    margin-top: 2px;
}

.diagram-aktualis {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primer);
    text-align: right;
}

/* SVG diagram */
.diagram-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.diagram-ures {
    text-align: center;
    padding: var(--ter-l);
    color: var(--szurke-400);
    font-size: 0.875rem;
}

/* Jelölő magyarázat */
.diagram-jelmagyarazat {
    display: flex;
    gap: var(--ter-m);
    margin-top: var(--ter-s);
    justify-content: center;
}

.jel-elem {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--szurke-500);
}

.jel-vonal {
    display: inline-block;
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

/* Makró átlag rács */
.makro-atlag-racs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-m);
    margin-top: var(--ter-s);
}

.makro-atlag-elem {
    text-align: center;
}

.mae-sav {
    height: 8px;
    background: var(--szurke-100);
    border-radius: 99px;
    margin-bottom: var(--ter-xs);
    position: relative;
    overflow: hidden;
}

.mae-sav::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--szazalek, 0%);
    background: var(--szin, var(--primer));
    border-radius: 99px;
    transition: width var(--atm-lassu);
}

.mae-ertek {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--masodik);
}

.mae-cimke {
    font-size: 0.7rem;
    color: var(--szurke-400);
    margin-bottom: 2px;
}

.mae-szazalek {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primer);
}

/* Mozgástípus megoszlás */
.tipus-megoszlas {
    margin-top: var(--ter-m);
    display: flex;
    flex-direction: column;
    gap: var(--ter-xs);
}

.tm-sor {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
}

.tm-cimke {
    font-size: 0.75rem;
    color: var(--szurke-600);
    min-width: 64px;
    font-weight: 500;
}

.tm-sav-hatter {
    flex: 1;
    height: 8px;
    background: var(--szurke-100);
    border-radius: 99px;
    overflow: hidden;
}

.tm-sav-tolto {
    height: 100%;
    border-radius: 99px;
    transition: width var(--atm-lassu);
}

.tm-ertek {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--szurke-500);
    min-width: 36px;
    text-align: right;
}

/* ============================================
   PROFIL OLDAL
   ============================================ */

/* Fejléc */
.profil-fej {
    display: flex;
    align-items: center;
    gap: var(--ter-m);
    background: var(--feher);
    border-radius: var(--radius-l);
    padding: var(--ter-m);
    margin-bottom: var(--ter-m);
    box-shadow: var(--arnyek-s);
}

.profil-avatar-nagy {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
    color: white;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profil-fej-info {
    flex: 1;
    min-width: 0;
}

.profil-nev {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--szurke-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profil-email {
    font-size: 0.8rem;
    color: var(--szurke-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profil-meta {
    font-size: 0.8rem;
    color: var(--szurke-600);
    margin-top: 2px;
}

/* Streak sor */
.streak-sor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-s);
    margin-bottom: var(--ter-m);
}

.streak-kartya {
    background: var(--feher);
    border-radius: var(--radius-m);
    padding: var(--ter-m) var(--ter-s);
    text-align: center;
    box-shadow: var(--arnyek-s);
}

.streak-szam {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--szurke-800);
    line-height: 1;
}

.streak-cimke {
    font-size: 0.72rem;
    color: var(--szurke-500);
    margin-top: 4px;
}

/* Bejegyzés rács */
.bejegyzes-racs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bej-elem {
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bej-elem.bej-ures {
    opacity: 0.5;
}

.bej-cimke {
    font-size: 0.78rem;
    color: var(--szurke-700);
}

.bej-db {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primer-sotet);
}

/* BMI */
.bmi-ertek-sor {
    display: flex;
    align-items: flex-start;
    gap: var(--ter-m);
    margin-bottom: var(--ter-m);
}

.bmi-fo-szam {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.bmi-egyseg {
    font-size: 0.78rem;
    color: var(--szurke-500);
    margin-top: 4px;
    text-align: center;
}

.bmi-reszletek {
    flex: 1;
}

.bmi-adat {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--szurke-600);
    border-bottom: 1px solid var(--szurke-100);
    padding: 3px 0;
}

.bmi-adat strong {
    color: var(--szurke-800);
}

.bmi-skala-svg {
    width: 100%;
    height: 32px;
    display: block;
    margin: var(--ter-s) 0 4px;
}

.bmi-kategoria-sor {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    gap: 2px;
    flex-wrap: wrap;
}

/* Donut makró célkörök */
.donut-racs {
    display: flex;
    justify-content: space-around;
    margin-bottom: var(--ter-m);
}

.donut-kontener {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.donut-cimke {
    font-size: 0.72rem;
    color: var(--szurke-600);
    text-align: center;
}

.makro-cel-sor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mcs-elem {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--szurke-700);
}

.mcs-pont {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Profil szerkesztő form */
.form-sor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ter-s);
}

.checkbox-csoport {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-cimke {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--szurke-700);
    cursor: pointer;
}

.checkbox-cimke input[type=checkbox] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primer);
}

/* Makró összeg jelző */
.makro-osszeg-jelzo {
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-s);
}

.osszeg-ok {
    background: var(--primer-hatter);
    color: var(--primer-sotet);
}

.osszeg-hiba {
    background: var(--hangsuly-vilagos);
    color: var(--hangsuly);
}

/* API kulcs */
.api-kulcs-gomb-sor {
    display: flex;
    gap: var(--ter-s);
    margin-top: var(--ter-s);
}

/* Veszélyes zóna */
.veszelyes-zona {
    border: 1px solid var(--hangsuly-vilagos);
}

.veszelyes-elem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ter-m);
}

.veszelyes-cim {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--szurke-800);
}

.veszelyes-elvalo {
    border: none;
    border-top: 1px solid var(--szurke-200);
    margin: var(--ter-m) 0;
}

.veszelyes-form {
    margin-top: var(--ter-m);
    padding: var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    border: 1px solid var(--hangsuly-vilagos);
}

.btn-veszelyes {
    background: var(--hangsuly);
    color: white;
    border: none;
}

.btn-veszelyes:hover {
    background: #c0392b;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Utility */
.mb-s  { margin-bottom: var(--ter-s); }
.mb-m  { margin-bottom: var(--ter-m); }
.mt-m  { margin-top: var(--ter-m); }
.kicsi { font-size: 0.8rem; }
.szoveg-szurke    { color: var(--szurke-500); }
.szoveg-primer    { color: var(--primer-sotet); }
.szoveg-veszelyes { color: var(--hangsuly); }
.szekcion-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ter-m);
}
.btn-kicsi {
    padding: 6px 14px;
    font-size: 0.82rem;
}
.btn-teljes {
    width: 100%;
    justify-content: center;
}

/* ============================================
   ÉTREND OLDAL
   ============================================ */

/* Típus toggle */
.etrend-tipus-valaszto {
    display: flex;
    gap: var(--ter-s);
}

.tipus-gomb {
    flex: 1;
    padding: 10px var(--ter-m);
    border: 2px solid var(--szurke-200);
    background: var(--feher);
    border-radius: var(--radius-m);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--szurke-600);
    cursor: pointer;
    transition: all var(--atm-gyors);
}

.tipus-gomb.aktiv {
    border-color: var(--primer);
    background: var(--primer-hatter);
    color: var(--primer-sotet);
}

/* Loading */
.loading-doboz {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ter-m);
    padding: var(--ter-l);
    text-align: center;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--szurke-200);
    border-top-color: var(--primer);
    border-radius: 50%;
    animation: forog 0.8s linear infinite;
}

@keyframes forog {
    to { transform: rotate(360deg); }
}

.loading-szoveg {
    font-size: 0.88rem;
    color: var(--szurke-600);
    margin: 0;
}

/* Info doboz */
.info-doboz {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-s);
    padding: 10px var(--ter-m);
    font-size: 0.85rem;
    color: #1D4ED8;
}

/* Nap blokk accordion */
.nap-blokk {
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-m);
    overflow: hidden;
    margin-bottom: var(--ter-s);
}

.nap-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ter-m);
    background: var(--szurke-50);
    cursor: pointer;
    user-select: none;
    gap: var(--ter-s);
}

.nap-fejlec:hover {
    background: var(--szurke-100);
}

.nap-nev {
    font-weight: 700;
    font-size: 1rem;
    color: var(--szurke-800);
    flex-shrink: 0;
}

.nap-fejlec-jobb {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nap-makro-sor {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nap-nyil {
    color: var(--szurke-400);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.nap-tartalom {
    padding: var(--ter-m);
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
}

/* Makró badge-ek */
.makro-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.makro-kcal {
    background: #FEF3C7;
    color: #92400E;
}

.makro-f {
    background: #DBEAFE;
    color: #1E40AF;
}

.makro-sz {
    background: #FEF9C3;
    color: #78350F;
}

.makro-z {
    background: #D1FAE5;
    color: #065F46;
}

/* Batch átvitel sor */
.batch-atalas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--ter-m);
    background: var(--primer-hatter);
    border-radius: var(--radius-s);
    border: 1px solid var(--primer-vilagos);
    margin-bottom: var(--ter-s);
}

/* Étkezés kártya */
.etkezes-kartya {
    background: var(--feher);
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    transition: box-shadow var(--atm-gyors);
}

.etkezes-kartya:hover {
    box-shadow: var(--arnyek-m);
}

.etkezes-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ter-s);
    margin-bottom: var(--ter-s);
}

.etkezes-tipus {
    font-size: 0.75rem;
    color: var(--szurke-500);
    margin-bottom: 2px;
}

.etkezes-nev {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--szurke-800);
}

.etkezes-jobb {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.etkezes-kcal {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--figyelmeztet);
}

.etkezes-makro-sor {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: var(--ter-s);
}

/* Recept toggle */
.recept-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--primer-sotet);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: inherit;
}

.recept-panel {
    margin-top: var(--ter-s);
    padding: var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    border-left: 3px solid var(--primer);
}

.recept-szekcion {
    margin-bottom: var(--ter-s);
}

.recept-cim {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--szurke-600);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recept-szoveg {
    font-size: 0.88rem;
    color: var(--szurke-700);
    line-height: 1.6;
}

.elkeszites-lepesek {
    margin: 0;
    padding-left: 20px;
    font-size: 0.88rem;
    color: var(--szurke-700);
    line-height: 1.6;
}

.elkeszites-lepesek li {
    margin-bottom: 4px;
}

.elkeszites-lepesek li:last-child {
    margin-bottom: 0;
}

/* Bevásárlólista */
.bev-progress-sor {
    display: flex;
    align-items: center;
    gap: var(--ter-m);
}

.bev-kategoria {
    margin-bottom: var(--ter-m);
}

.bev-kat-cim {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--szurke-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--szurke-200);
}

.bev-tetel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--szurke-100);
    cursor: pointer;
    transition: opacity var(--atm-gyors);
}

.bev-tetel:last-child {
    border-bottom: none;
}

.bev-check {
    width: 18px;
    height: 18px;
    accent-color: var(--primer);
    cursor: pointer;
    flex-shrink: 0;
}

.bev-szoveg {
    font-size: 0.9rem;
    color: var(--szurke-700);
}

.bev-beszerezve .bev-szoveg {
    text-decoration: line-through;
    color: var(--szurke-400);
}

/* Progress bar */
.progress-sor {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--ter-s);
}

.progress-hatter {
    flex: 1;
    height: 8px;
    background: var(--szurke-200);
    border-radius: 99px;
    overflow: hidden;
}

.progress-kitolto {
    height: 100%;
    background: var(--primer);
    border-radius: 99px;
    transition: width var(--atm-lassu);
}

.progress-szoveg {
    font-size: 0.78rem;
    color: var(--szurke-500);
    white-space: nowrap;
}

/* Nap input kicsi */
.datum-input-kicsi {
    padding: 6px 10px;
    border: 1px solid var(--szurke-300);
    border-radius: var(--radius-s);
    font-size: 0.82rem;
    font-family: inherit;
    color: var(--szurke-700);
    background: var(--feher);
}

/* Korábbi tervek lista */
.korabbi-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
}

.korabbi-elem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-m);
    border: 1px solid var(--szurke-200);
    transition: opacity 0.3s;
}

.korabbi-link {
    text-decoration: none;
    flex: 1;
}

.korabbi-tipus {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--szurke-800);
    margin-bottom: 2px;
}

/* Btn ikon */
.btn-ikon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    border-radius: var(--radius-s);
    transition: background var(--atm-gyors);
    line-height: 1;
}

.btn-ikon:hover {
    background: var(--szurke-100);
}

/* ---- További info szekció ---- */
.tovabbi-info-szekció {
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.tovabbi-info-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--ter-m);
    background: var(--szurke-50);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--szoveg);
    text-align: left;
    transition: background var(--atm-gyors);
}

.tovabbi-info-fejlec:hover {
    background: var(--szurke-100);
}

#tovabbiInfoTartalom {
    padding: var(--ter-m);
}

.info-doboz-zold {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #15803D;
}

.checkbox-sor {
    display: flex;
    align-items: flex-start;
}

.checkbox-cimke {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--szoveg);
    line-height: 1.4;
}

.checkbox-cimke input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primer);
    cursor: pointer;
}

.checkbox-cimke-szurke {
    color: var(--szurke-400);
    cursor: default;
}

.badge-kicsi {
    display: inline-block;
    background: var(--primer-hatter);
    color: var(--primer-sotet);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
}

.mt-xs { margin-top: 6px; }

/* ============================================
   DOKUMENTUMOK OLDAL
   ============================================ */

/* Feltöltési zóna */
.feltoltes-zona {
    border: 2px dashed var(--szurke-300);
    border-radius: var(--radius-l);
    padding: var(--ter-xl) var(--ter-m);
    text-align: center;
    background: var(--szurke-50);
    transition: border-color var(--atm-gyors), background var(--atm-gyors);
    cursor: pointer;
}

.feltoltes-zona:hover,
.feltoltes-zona.dragover {
    border-color: var(--primer);
    background: var(--primer-hatter);
}

.feltoltes-zona-belseje {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.feltoltes-nagy-ikon {
    font-size: 2.5rem;
    line-height: 1;
}

.feltoltes-fo-szoveg {
    font-size: 1rem;
    font-weight: 600;
    color: var(--szurke-700);
}

.feltoltes-al-szoveg {
    font-size: 0.85rem;
    color: var(--szurke-400);
}

.feltoltes-info {
    font-size: 0.8rem;
    color: var(--primer-sotet);
    min-height: 1.2em;
}

.feltoltes-progress-blokk {
    padding: var(--ter-s) 0;
}

.progress-cimke-sor {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--ter-xs, 4px);
}

.font-bold { font-weight: 700; }

/* Dokumentum lista */
.dok-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ter-m);
}

.dok-kartya {
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-m);
    overflow: hidden;
    transition: box-shadow var(--atm-gyors);
}

.dok-kartya:hover {
    box-shadow: var(--arnyek-m);
}

/* Dokumentum fejléc */
.dok-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ter-m);
    gap: var(--ter-s);
    background: var(--feher);
}

.dok-bal {
    display: flex;
    align-items: center;
    gap: var(--ter-m);
    min-width: 0;
    flex: 1;
}

.dok-nagy-ikon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.dok-info {
    min-width: 0;
    flex: 1;
}

.dok-nev {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--szurke-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dok-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.dok-gombok {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Típus chip */
.tipus-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tipus-pdf {
    background: #FEE2E2;
    color: #991B1B;
}

.tipus-kep {
    background: #E0F2FE;
    color: #0369A1;
}

/* Kép előnézet */
.kep-elonezet-panel {
    padding: 0 var(--ter-m) var(--ter-m);
    background: var(--szurke-50);
}

.dok-kep-elonezet {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: var(--radius-s);
    border: 1px solid var(--szurke-200);
    display: block;
}

/* AI szekció */
.dok-ai-szekcion {
    padding: var(--ter-m);
    padding-top: 0;
    background: var(--feher);
}

.btn-ai {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--ter-m);
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    border: none;
    border-radius: var(--radius-m);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: opacity var(--atm-gyors);
    font-family: inherit;
}

.btn-ai:hover {
    opacity: 0.9;
}

.btn-ai:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* AI elemzés blokk */
.ai-elemzes-blokk {
    border: 1px solid #DDD6FE;
    border-radius: var(--radius-m);
    overflow: hidden;
    background: #FAFAFF;
}

.ai-elemzes-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ter-s) var(--ter-m);
    background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
    cursor: pointer;
    user-select: none;
}

.ai-cimke-sor {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-badge {
    display: inline-block;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: white;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
}

.ai-cimke-szoveg {
    font-size: 0.88rem;
    font-weight: 600;
    color: #4338CA;
}

.ai-fejlec-jobb {
    display: flex;
    align-items: center;
    gap: 10px;
}

.elemzes-nyil {
    color: #6366F1;
    font-size: 1rem;
}

.btn-link {
    background: none;
    border: none;
    color: #6366F1;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    text-decoration: underline;
}

.ai-elemzes-tartalom {
    padding: var(--ter-m);
}

/* Markdown tartalom */
.markdown-tartalom {
    font-size: 0.88rem;
    color: var(--szurke-700);
    line-height: 1.7;
}

.markdown-tartalom p {
    margin: 0 0 var(--ter-s);
}

.markdown-tartalom p:last-child {
    margin-bottom: 0;
}

.markdown-tartalom .md-h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--szurke-800);
    margin: var(--ter-m) 0 var(--ter-s);
    padding-bottom: 4px;
    border-bottom: 2px solid var(--szurke-200);
}

.markdown-tartalom .md-h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--szurke-700);
    margin: var(--ter-m) 0 6px;
}

.markdown-tartalom .md-h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--szurke-600);
    margin: var(--ter-s) 0 4px;
}

.markdown-tartalom .md-lista {
    padding-left: var(--ter-m);
    margin: var(--ter-s) 0;
}

.markdown-tartalom .md-lista li {
    margin-bottom: 4px;
}

.markdown-tartalom .md-tablazat {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    margin: var(--ter-s) 0 var(--ter-m);
}

.markdown-tartalom .md-tablazat th {
    background: var(--szurke-100);
    font-weight: 600;
    color: var(--szurke-700);
    text-align: left;
    padding: 6px 10px;
    border: 1px solid var(--szurke-200);
}

.markdown-tartalom .md-tablazat td {
    padding: 5px 10px;
    border: 1px solid var(--szurke-200);
    color: var(--szurke-700);
    vertical-align: top;
}

.markdown-tartalom .md-tablazat tr:nth-child(even) td {
    background: var(--szurke-50);
}

/* Üres állapot */
.ures-allapot {
    padding: var(--ter-xl) var(--ter-m);
    text-align: center;
}

.ures-nagy-ikon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: var(--ter-m);
}

.ures-cim {
    font-size: 1rem;
    font-weight: 600;
    color: var(--szurke-700);
    margin-bottom: var(--ter-s);
}

.ures-alcim {
    font-size: 0.85rem;
    color: var(--szurke-400);
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Badge szám */
.badge-szam {
    background: var(--szurke-200);
    color: var(--szurke-600);
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Info kártya kék */
.info-kartya-kek {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
}

.info-kartya-fejlec {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1D4ED8;
    margin-bottom: var(--ter-s);
}

.info-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-lista li {
    font-size: 0.85rem;
    color: #1E40AF;
    padding-left: 16px;
    position: relative;
}

.info-lista li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: #3B82F6;
}

/* mt-xs segéd */
.mt-xs { margin-top: 4px; }

/* ============================================
   RECEPTKÖNYV OLDAL
   ============================================ */

/* Fejléc stat sor */
.receptek-fejlec-blokk {
    margin-bottom: var(--ter-m);
}

.receptek-stat-sor {
    display: flex;
    gap: var(--ter-m);
    margin-bottom: var(--ter-m);
}

.rstat-elem {
    background: var(--feher);
    border-radius: var(--radius-m);
    padding: var(--ter-s) var(--ter-m);
    box-shadow: var(--arnyek-s);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rstat-szam {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--szurke-800);
}

.rstat-cimke {
    font-size: 0.78rem;
    color: var(--szurke-500);
}

/* Keresés */
.kereses-form {
    margin-bottom: var(--ter-s);
}

.kereses-sor {
    position: relative;
}

.kereses-input {
    width: 100%;
    padding: 10px var(--ter-m);
    border: 1px solid var(--szurke-300);
    border-radius: var(--radius-m);
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--feher);
    color: var(--szurke-800);
    box-sizing: border-box;
}

.kereses-input:focus {
    outline: none;
    border-color: var(--primer);
    box-shadow: 0 0 0 3px var(--primer-vilagos);
}

/* Szűrők */
.szuro-sor {
    display: flex;
    gap: var(--ter-s);
    flex-wrap: wrap;
}

.szuro-gomb {
    padding: 6px var(--ter-m);
    border-radius: 99px;
    border: 1px solid var(--szurke-300);
    background: var(--feher);
    color: var(--szurke-600);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--atm-gyors);
    cursor: pointer;
}

.szuro-gomb.aktiv,
.szuro-gomb:hover {
    border-color: var(--primer);
    background: var(--primer-hatter);
    color: var(--primer-sotet);
}

/* Recept form panel */
.recept-form-panel {
    margin-bottom: var(--ter-m);
}

.form-gomb-sor {
    display: flex;
    gap: var(--ter-s);
    margin-top: var(--ter-m);
}

.makro-cimke {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--szurke-600);
    margin-bottom: var(--ter-s);
}

.makro-osszeg-sor {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--ter-s);
    margin-bottom: var(--ter-m);
}

/* Élelmiszer kereső */
.elelmiszer-kereses-blokk {
    position: relative;
}

.eel-sor {
    display: flex;
    gap: var(--ter-s);
    align-items: center;
}

.eel-sor input[type=text] {
    flex: 1;
}

.eel-talalatok {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--feher);
    border: 1px solid var(--szurke-300);
    border-radius: var(--radius-m);
    box-shadow: var(--arnyek-l);
    z-index: 100;
    max-height: 260px;
    overflow-y: auto;
}

.eel-talalat {
    padding: 10px var(--ter-m);
    cursor: pointer;
    border-bottom: 1px solid var(--szurke-100);
    transition: background var(--atm-gyors);
}

.eel-talalat:last-child {
    border-bottom: none;
}

.eel-talalat:hover {
    background: var(--primer-hatter);
}

.eel-nev {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--szurke-800);
}

.eel-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--szurke-500);
    margin-top: 2px;
}

.eel-ures {
    padding: var(--ter-m);
    font-size: 0.85rem;
    color: var(--szurke-400);
    text-align: center;
}

.eel-kivalasztott {
    margin-top: var(--ter-s);
    padding: 8px var(--ter-m);
    background: var(--primer-hatter);
    border-radius: var(--radius-s);
    border: 1px solid var(--primer-vilagos);
}

.eel-kiv-tartalom {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eel-kiv-nev {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primer-sotet);
}

/* Recept lista */
.recept-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ter-m);
}

.recept-kartya {
    background: var(--feher);
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-l);
    padding: var(--ter-m);
    transition: box-shadow var(--atm-gyors);
}

.recept-kartya:hover {
    box-shadow: var(--arnyek-m);
}

/* Recept kártya fejléc */
.rk-fejlec {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ter-s);
    margin-bottom: var(--ter-s);
}

.rk-nev-blokk {
    flex: 1;
    min-width: 0;
}

.rk-nev {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--szurke-800);
    line-height: 1.3;
}

.rk-leiras {
    font-size: 0.82rem;
    color: var(--szurke-500);
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kedvenc gomb */
.kedvenc-gomb {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-s);
    transition: transform var(--atm-gyors);
    flex-shrink: 0;
    line-height: 1;
    color: var(--szurke-400);
}

.kedvenc-gomb.aktiv {
    color: #F59E0B;
}

.kedvenc-gomb:hover {
    transform: scale(1.2);
}

/* Makró sor */
.rk-makro-sor {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: var(--ter-s);
}

.rk-adag {
    margin-left: auto;
}

/* Recept részlet panel */
.recept-reszlet-panel {
    margin-top: var(--ter-s);
    padding: var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    border-left: 3px solid var(--primer);
}

/* Akció gombok */
.rk-akciok {
    display: flex;
    gap: var(--ter-s);
    align-items: center;
    margin-top: var(--ter-m);
    padding-top: var(--ter-s);
    border-top: 1px solid var(--szurke-100);
}

.rk-naplo-gomb {
    flex: 1;
}

/* Naplóba rögzítés modal */
.naplo-rogzit-modal {
    max-height: 90vh;
    overflow-y: auto;
}

.adag-valaszto-sor {
    display: flex;
    align-items: center;
    gap: var(--ter-m);
    margin-top: var(--ter-s);
}

.adag-szam {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--szurke-800);
    min-width: 2ch;
    text-align: center;
}

/* ============================================
   TESTMÉRETEK OLDAL
   ============================================ */

/* Összesítő kártyák rácsa */
.tm-osszesito-racs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-s);
    margin-bottom: var(--ter-m);
}

.tm-osszesito-kartya {
    background: var(--feher);
    border-radius: var(--radius-m);
    box-shadow: var(--arnyek-s);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tm-osszesito-szin {
    height: 4px;
    width: 100%;
}

.tm-osszesito-tartalom {
    padding: var(--ter-s) var(--ter-s) var(--ter-s);
    flex: 1;
}

.tm-osszesito-cimke {
    font-size: 0.72rem;
    color: var(--szurke-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.tm-osszesito-ertek {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--szurke-800);
    line-height: 1;
}

.tm-osszesito-ertek .kicsi {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--szurke-400);
}

.tm-osszesito-valtozas {
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 3px;
}

.tm-osszesito-valtozas.csok { color: #10B981; }
.tm-osszesito-valtozas.no   { color: #EF4444; }

/* WHR kártya */
.whr-kartya {
    margin-bottom: var(--ter-m);
}

.whr-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--ter-m);
}

.whr-ertek-blokk {
    text-align: right;
}

.whr-fo-szam {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
}

.whr-kategoria {
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 2px;
}

.whr-skala-kontener {
    margin-top: var(--ter-s);
}

.whr-skala-hatter {
    position: relative;
    height: 10px;
    border-radius: 5px;
    overflow: visible;
    margin-bottom: 4px;
}

.whr-skala-gradient {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(to right, #10B981 0%, #2ECC71 25%, #F59E0B 60%, #EF4444 100%);
}

.whr-mutato {
    position: absolute;
    top: -3px;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid var(--szurke-700);
    border-radius: 50%;
    z-index: 1;
}

.whr-skala-cimkek {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--szurke-400);
    position: relative;
}

/* WHR előnézet a formban */
.whr-elonezet {
    padding: var(--ter-s) var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: var(--ter-s);
}

/* Form rács */
.tm-form-racs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ter-s);
}

.tm-form-mezo label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--szurke-700);
    margin-bottom: 4px;
}

.tm-szin-pont {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Diagram rács */
.tm-diagram-racs {
    display: flex;
    flex-direction: column;
    gap: var(--ter-m);
}

.tm-diagram-elem {
    border-bottom: 1px solid var(--szurke-100);
    padding-bottom: var(--ter-m);
}

.tm-diagram-elem:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tm-diagram-fejlec {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    margin-bottom: var(--ter-s);
}

.tm-diagram-cimke {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--szurke-700);
    flex: 1;
}

.tm-diagram-ertek {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--szurke-800);
}

.tm-valtozas-chip {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.tm-valtozas-chip.csok {
    background: #DCFCE7;
    color: #15803D;
}

.tm-valtozas-chip.no {
    background: #FEE2E2;
    color: #DC2626;
}

.diagram-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.diagram-ures {
    font-size: 0.8rem;
    color: var(--szurke-400);
    text-align: center;
    padding: var(--ter-s) 0;
}

/* Mérések lista */
.tm-lista {
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
}

.tm-lista-sor {
    border: 1px solid var(--szurke-100);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
    background: var(--szurke-50);
    transition: opacity 0.3s;
}

.tm-lista-datum {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--szurke-700);
    margin-bottom: var(--ter-xs);
    display: flex;
    align-items: center;
    gap: var(--ter-s);
}

.whr-mini-chip {
    font-size: 0.72rem;
    font-weight: 800;
}

.tm-lista-meretek {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: var(--ter-xs);
}

.tm-meret-chip {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1.5px solid;
    background: white;
}

.tm-lista-megjegyzes {
    font-size: 0.78rem;
    color: var(--szurke-500);
    font-style: italic;
    margin-bottom: var(--ter-xs);
}

.tm-lista-akciok {
    display: flex;
    gap: var(--ter-xs);
    justify-content: flex-end;
}

/* Infó kártya */
.info-kartya-kek {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
}

.info-kartya-fejlec {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E40AF;
    margin-bottom: var(--ter-s);
}

.info-lista {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 0;
}

.info-lista li {
    font-size: 0.8rem;
    color: #1D4ED8;
    margin-bottom: 4px;
    line-height: 1.5;
}

/* ============================================
   AI TANÁCSADÓ CHAT OLDAL
   ============================================ */

/* Chat oldal speciális layout — nincs normál fo-tartalom padding-bottom,
   mert a beviteli sáv fixált és a chat-kontener kitölti a maradékot */
body.ai-chat-oldal .fo-tartalom {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--top-magassag));
    overflow: hidden;
}

/* Kontextus chip sor */
.ai-kontextus-sor {
    display: flex;
    gap: var(--ter-s);
    padding: var(--ter-s) 0 0;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.ai-kontextus-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--szurke-100);
    color: var(--szurke-500);
    white-space: nowrap;
}

.ai-kontextus-chip.aktiv {
    background: var(--primer-hatter);
    color: var(--primer-sotet);
}

/* Gyors kérdés gombok */
.gyors-kerdesek-sor {
    display: flex;
    gap: var(--ter-s);
    padding: var(--ter-s) 0;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.gyors-kerdesek-sor::-webkit-scrollbar { display: none; }

.gyors-kerdes-gomb {
    flex-shrink: 0;
    background: white;
    border: 1.5px solid var(--szurke-200);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--szurke-700);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--atm-gyors), background var(--atm-gyors);
}

.gyors-kerdes-gomb:hover {
    border-color: var(--primer);
    background: var(--primer-hatter);
    color: var(--primer-sotet);
}

/* Chat üzenetek konténer — görgethető, kitölti a helyet */
.chat-kontener {
    flex: 1;
    overflow-y: auto;
    padding: var(--ter-s) 0;
    display: flex;
    flex-direction: column;
    gap: var(--ter-m);
    scroll-behavior: smooth;
}

/* Üdvözlő állapot */
.chat-udvozlo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--ter-xl) var(--ter-m);
    gap: var(--ter-m);
    flex: 1;
    justify-content: center;
}

.chat-bot-avatar {
    font-size: 3rem;
    line-height: 1;
}

.chat-bot-avatar.nagy { font-size: 4rem; }

.chat-udvozlo-cim {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--szurke-800);
    margin-bottom: var(--ter-s);
}

.chat-udvozlo-alcim {
    font-size: 0.88rem;
    color: var(--szurke-500);
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

/* Üzenet pár (kérdés + válasz egység) */
.chat-uzenet-par {
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
}

/* Üzenet sor (avatar + buborék) */
.chat-sor {
    display: flex;
    gap: var(--ter-s);
    align-items: flex-end;
}

.chat-sor.jobb {
    flex-direction: row-reverse;
}

/* Avatár */
.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.felh-avatar {
    background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
}

.bot-avatar {
    background: var(--szurke-100);
    font-size: 1.1rem;
}

/* Buborékok */
.chat-buborek {
    max-width: 85%;
    padding: var(--ter-s) var(--ter-m);
    border-radius: var(--radius-l);
    font-size: 0.88rem;
    line-height: 1.6;
    word-break: break-word;
}

.chat-buborek.felhasznalo {
    background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
    color: white;
    border-bottom-right-radius: var(--radius-s);
}

.chat-buborek.ai {
    background: var(--szurke-100);
    color: var(--szurke-800);
    border-bottom-left-radius: var(--radius-s);
}

.chat-buborek.hiba {
    background: #FEE2E2;
    color: #DC2626;
    border-bottom-left-radius: var(--radius-s);
}

/* AI buborék + meta (dátum + törlés) */
.chat-buborek-csoport {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 85%;
}

.chat-meta {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    font-size: 0.7rem;
    color: var(--szurke-400);
    padding-left: 4px;
}

.chat-torles-gomb {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.5;
    padding: 0;
    line-height: 1;
    transition: opacity var(--atm-gyors);
}

.chat-torles-gomb:hover { opacity: 1; }

/* Gépelés jelző */
.chat-buborek.gepeles {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
}

.gepeles-pont {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--szurke-400);
    display: inline-block;
    animation: gepelesPulzal 1.2s ease-in-out infinite;
}

.gepeles-pont:nth-child(2) { animation-delay: 0.2s; }
.gepeles-pont:nth-child(3) { animation-delay: 0.4s; }

@keyframes gepelesPulzal {
    0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
    30%            { opacity: 1;   transform: scale(1.3); }
}

/* Beviteli sáv — fixált, a bottom nav felett */
.chat-bevitel-wrap {
    flex-shrink: 0;
    background: white;
    border-top: 1px solid var(--szurke-200);
    padding: var(--ter-s) 0 calc(var(--nav-magassag) + var(--ter-s));
}

.chat-bevitel-sor {
    display: flex;
    gap: var(--ter-s);
    align-items: flex-end;
}

.chat-textarea {
    flex: 1;
    border: 1.5px solid var(--szurke-200);
    border-radius: var(--radius-l);
    padding: 10px var(--ter-m);
    font-size: 0.9rem;
    font-family: var(--font-alap);
    line-height: 1.5;
    resize: none;
    outline: none;
    transition: border-color var(--atm-gyors);
    background: var(--szurke-50);
    min-height: 44px;
    max-height: 120px;
    overflow-y: auto;
}

.chat-textarea:focus {
    border-color: var(--primer);
    background: white;
}

.chat-kuldes-gomb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity var(--atm-gyors), transform var(--atm-gyors);
}

.chat-kuldes-gomb:hover:not(:disabled) {
    opacity: 0.9;
    transform: scale(1.05);
}

.chat-kuldes-gomb:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-bevitel-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    min-height: 20px;
}

.char-szamlalo {
    font-size: 0.7rem;
    color: var(--szurke-400);
}

.link-gomb {
    background: none;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-alap);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--atm-gyors);
}

.link-gomb:hover {
    text-decoration-color: currentColor;
}

/* ---- Chat tab fejléc ---- */
.chat-tab-fejlec {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--szurke-200);
    background: var(--feher);
    flex-shrink: 0;
}

.chat-tab {
    flex: 1;
    padding: 12px var(--ter-m);
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--szurke-500);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color var(--atm-gyors), border-color var(--atm-gyors);
}

.chat-tab.aktiv {
    color: var(--primer);
    border-bottom-color: var(--primer);
}

.chat-tab:hover:not(.aktiv) {
    color: var(--szoveg);
}

.tab-badge {
    background: var(--primer);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
}

/* ---- Chat tab tartalom ---- */
.chat-tab-tartalom {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- Dokumentum chat szekció ---- */
.dok-chat-szekció {
    background: var(--feher);
    border-bottom: 1px solid var(--szurke-200);
    padding: var(--ter-m);
    flex-shrink: 0;
}

.dok-ossz-fejlec {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ter-s);
    margin-bottom: var(--ter-s);
}

.dok-ossz-szoveg {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--szoveg);
    max-height: 280px;
    overflow-y: auto;
    padding: var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    border: 1px solid var(--szurke-200);
}

.dok-ossz-szoveg h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primer-sotet);
    border-bottom: 1px solid var(--szurke-200);
    padding-bottom: 4px;
    margin: 14px 0 6px;
}

.dok-ossz-szoveg h2:first-child {
    margin-top: 0;
}

.dok-ossz-szoveg h3 {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--szurke-600);
    margin: 10px 0 4px;
}

.dok-ossz-szoveg ul {
    margin: 4px 0 8px 0;
    padding-left: 18px;
}

.dok-ossz-szoveg li {
    margin-bottom: 3px;
    list-style-type: disc;
}

.dok-ossz-szoveg strong {
    font-weight: 600;
    color: var(--primer-sotet);
}

.dok-ossz-szoveg em {
    font-style: italic;
    color: var(--szurke-600);
}

.dok-ossz-szoveg p {
    margin: 0 0 6px;
}

.dok-ossz-szoveg p:last-child {
    margin-bottom: 0;
}

.dok-ossz-ures {
    font-size: 0.88rem;
    color: var(--szurke-500);
    text-align: center;
    padding: var(--ter-m);
    line-height: 1.6;
}

.dok-gyors-kerdesek {
    padding: var(--ter-s) var(--ter-m);
    border-bottom: 1px solid var(--szurke-100);
    flex-shrink: 0;
}

.dok-chat-kontener {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.link-szoveg {
    color: var(--primer);
    text-decoration: underline;
}

/* ============================================
   ASZTALI NÉZET — 1024px felett
   ============================================ */

/* Asztali nav alapból rejtve (mobil az alap) */
.asztali-nav {
    display: none;
}

@media (min-width: 1024px) {

    /* --- Layout átállítás --- */
    .app-wrapper {
        max-width: 100%;
        background: var(--szurke-100);
    }

    /* Mobil elemek elrejtése */
    .mobil-top-bar {
        display: none;
    }

    .bottom-nav {
        display: none;
    }

    .fab-gomb {
        display: none;
    }

    /* --- Asztali top nav --- */
    .asztali-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: white;
        border-bottom: 1px solid var(--szurke-200);
        box-shadow: var(--arnyek-s);
        z-index: 200;
    }

    .asztali-nav-belso {
        max-width: 1280px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        align-items: center;
        gap: var(--ter-l);
        padding: 0 var(--ter-xl);
    }

    .asztali-logo {
        display: flex;
        align-items: center;
        gap: var(--ter-s);
        font-size: 1.05rem;
        font-weight: 400;
        color: var(--masodik);
        text-decoration: none;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .asztali-logo strong {
        font-weight: 700;
    }

    .asztali-logo .logo-pont {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .asztali-nav-linkek {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1;
        justify-content: center;
    }

    .asztali-nav-link {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 7px 12px;
        border-radius: var(--radius-m);
        color: var(--szurke-600);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: background var(--atm-gyors), color var(--atm-gyors);
        white-space: nowrap;
    }

    .asztali-nav-link:hover {
        background: var(--szurke-100);
        color: var(--masodik);
    }

    .asztali-nav-link.aktiv {
        background: var(--primer-hatter);
        color: var(--primer-sotet);
        font-weight: 600;
    }

    .asztali-nav-jobb {
        display: flex;
        align-items: center;
        gap: var(--ter-m);
        flex-shrink: 0;
    }

    .asztali-rogzites-gomb {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        background: linear-gradient(135deg, var(--primer), var(--primer-sotet));
        color: white;
        border: none;
        border-radius: var(--radius-xl);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--atm-gyors);
        white-space: nowrap;
        font-family: var(--font-alap);
    }

    .asztali-rogzites-gomb:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(46,204,113,0.4);
    }

    .asztali-nav-dropdown {
        position: relative;
    }

    .asztali-nav-dropdown-gomb {
        background: none;
        border: none;
        cursor: pointer;
        font-family: var(--font-alap);
    }

    .asztali-nav-dropdown-lista {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        background: white;
        border-radius: var(--radius-m);
        box-shadow: var(--arnyek-s);
        padding: 6px;
        min-width: 190px;
        z-index: 300;
        flex-direction: column;
    }

    .asztali-nav-dropdown-lista.nyitva {
        display: flex;
    }

    .asztali-nav-dropdown-link {
        display: block;
        padding: 8px 12px;
        border-radius: var(--radius-m);
        color: var(--szurke-600);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--atm-gyors), color var(--atm-gyors);
    }

    .asztali-nav-dropdown-link:hover {
        background: var(--szurke-100);
        color: var(--masodik);
    }

    .asztali-nav-dropdown-link.aktiv {
        background: var(--primer-hatter);
        color: var(--primer-sotet);
        font-weight: 600;
    }

    /* --- Fő tartalom asztali --- */
    .fo-tartalom {
        max-width: 1200px;
        margin: 0 auto;
        padding-top: calc(64px + var(--ter-xl));
        padding-bottom: var(--ter-xl);
        padding-left: var(--ter-xl);
        padding-right: var(--ter-xl);
    }

    /* Toast asztali pozíció */
    .toast-container {
        left: 50%;
        transform: translateX(-50%);
        max-width: 480px;
        top: calc(64px + var(--ter-m));
    }

    /* Modal asztali: középre, nem alulról csúszik */
    .modal-hatter {
        align-items: center;
        justify-content: center;
    }

    .modal-panel {
        border-radius: var(--radius-l);
        max-width: 560px;
        animation: modal-belep var(--atm-normal);
    }

    @keyframes modal-belep {
        from { opacity: 0; transform: scale(0.95); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* --- Kártyák asztali --- */
    .kartya {
        padding: var(--ter-l);
        margin-bottom: var(--ter-l);
    }

    .kartya-racs {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--ter-l);
        margin-bottom: var(--ter-l);
    }

    .kartya-szines .kartya-ertek {
        font-size: 1.8rem;
    }

    /* Köszöntő szélesebb nézetben */
    .koszonto-szekcion {
        padding: var(--ter-xl) var(--ter-xl);
        border-radius: var(--radius-xl);
        margin-bottom: var(--ter-l);
    }

    .koszonto-szekcion h2 {
        font-size: 1.6rem;
    }

    .koszonto-nap {
        font-size: 0.9rem;
    }

    .koszonto-motivacio {
        font-size: 0.95rem;
    }

    .napi-pont-kor {
        width: 84px;
        height: 84px;
    }

    .pont-szam {
        font-size: 1.4rem;
    }

    /* Gyors navigáció 4 oszlopos */
    .gyors-nav-racs {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Szekció fejléc */
    .szekcion-cim {
        font-size: 1.1rem;
    }

    /* Progress és makró szellősebb */
    .progress-sor {
        margin-bottom: var(--ter-m);
    }

    .progress-sav {
        height: 10px;
    }

    .makro-ertek {
        font-size: 1.4rem;
    }

    /* Rögzítés rács asztali: 4 oszlop */
    .rogzites-racs {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--ter-m);
    }

    .rogzites-ikon {
        font-size: 2rem;
    }

    /* Varázsló asztali */
    .varazslol-container {
        max-width: 600px;
    }

    /* Napló tab sor asztali */
    .tab-sor {
        flex-wrap: wrap;
        gap: var(--ter-s);
    }

    /* Stat diagramok szellősebb */
    .stat-svg-wrap {
        margin-bottom: var(--ter-l);
    }

    /* AI chat asztali: korrigáljuk a chat height-et a 64px-es nav-hoz */
    .fo-tartalom[style*="height"] {
        height: calc(100dvh - 64px) !important;
    }

    .chat-bevitel-wrap {
        padding-bottom: var(--ter-m);
    }
}

/* --------------------------------------------
   CÉLKÖVETÉS SZEKCIÓ
   -------------------------------------------- */
.celkovetes-kartya {
    padding-bottom: var(--ter-s);
}

/* Tab sor */
.celkov-tab-sor {
    display: flex;
    gap: var(--ter-s);
    margin-bottom: var(--ter-m);
    border-bottom: 2px solid var(--szurke-100);
    padding-bottom: 0;
}

.celkov-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: var(--ter-s) var(--ter-l);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--szurke-400);
    cursor: pointer;
    transition: color var(--atm-gyors), border-color var(--atm-gyors);
    font-family: var(--font-alap);
}

.celkov-tab:hover {
    color: var(--masodik);
}

.celkov-tab.aktiv {
    color: var(--primer-sotet);
    border-bottom-color: var(--primer);
}

/* Tab tartalmak */
.celkov-tartalom {
    display: none;
    padding-top: var(--ter-s);
}

.celkov-tartalom.aktiv {
    display: block;
}

/* Alcím (hét/hónap fejléc) */
.celkov-alcim {
    font-size: 0.8rem;
    color: var(--szurke-500);
    font-weight: 500;
    margin-bottom: var(--ter-m);
    padding: var(--ter-s) var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    border-left: 3px solid var(--primer);
}

/* Egy sor (cimke + progress) */
.celkov-sor {
    margin-bottom: var(--ter-m);
}

.celkov-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    gap: var(--ter-s);
}

.celkov-cimke {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--masodik);
    white-space: nowrap;
}

.celkov-ertek {
    font-size: 0.8rem;
    color: var(--szurke-500);
    text-align: right;
    white-space: nowrap;
}

/* Progress sáv */
.celkov-sav {
    height: 9px;
    background: var(--szurke-100);
    border-radius: 99px;
    overflow: hidden;
}

.celkov-tolto {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s ease;
}

.celkov-piros   { background: var(--hangsuly); }
.celkov-narancs { background: var(--figyelmeztet); }
.celkov-zold    { background: var(--primer); }
.celkov-kek     { background: #3498DB; }

@media (min-width: 1024px) {
    .celkov-tab {
        padding: var(--ter-s) var(--ter-xl);
        font-size: 1rem;
    }

    .celkov-sor {
        margin-bottom: var(--ter-l);
    }

    .celkov-sav {
        height: 11px;
    }

    .celkov-cimke {
        font-size: 0.95rem;
        min-width: 140px;
    }

    .celkov-ertek {
        font-size: 0.875rem;
    }
}

/* --------------------------------------------
   TESTSÚLY ÁTLAG & TREND KÁRTYA
   -------------------------------------------- */
.ts-atlag-kartya {
    margin-top: 0;
}

.ts-atlag-racs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-m);
    margin-bottom: var(--ter-m);
}

.ts-atlag-elem {
    text-align: center;
    padding: var(--ter-m) var(--ter-s);
    background: var(--szurke-50);
    border-radius: var(--radius-m);
    border: 1px solid var(--szurke-100);
}

.ts-atlag-ertek {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--masodik);
    line-height: 1.2;
}

.ts-atlag-cimke {
    font-size: 0.75rem;
    color: var(--szurke-400);
    margin-top: 3px;
    font-weight: 500;
}

.ts-trend-sor {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    padding: var(--ter-s) var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
    font-size: 0.875rem;
}

.ts-trend-cimke {
    color: var(--szurke-500);
    font-weight: 600;
}

.ts-trend-zold  { color: var(--primer-sotet); font-weight: 700; }
.ts-trend-piros { color: var(--hangsuly);     font-weight: 700; }
.ts-trend-szurke { color: var(--szurke-400);  font-weight: 500; }

.ts-trend-info {
    color: var(--szurke-400);
    font-size: 0.8rem;
}

/* --------------------------------------------
   KEBAB (⋮) MENÜ + SZERKESZTÉS MODAL
   -------------------------------------------- */
.kebab-menu {
    position: relative;
    flex-shrink: 0;
}

.kebab-gomb {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 1.1rem;
    color: var(--szurke-400);
    cursor: pointer;
    border-radius: var(--radius-s);
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.torles-gomb {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 1.1rem;
    color: var(--szurke-400);
    cursor: pointer;
    border-radius: var(--radius-s);
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.torles-gomb:hover {
    background: var(--hangsuly-vilagos);
    color: var(--hangsuly);
}

.kebab-gomb:hover {
    background: var(--szurke-100);
    color: var(--szurke-700);
}

.kebab-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-m);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    min-width: 140px;
    z-index: 200;
    overflow: hidden;
}

.kebab-dropdown.nyitva {
    display: block;
}

.kebab-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--szurke-700);
    cursor: pointer;
    transition: background 0.15s;
}

.kebab-dropdown button:hover {
    background: var(--szurke-50);
}

.kebab-dropdown button:first-child {
    border-bottom: 1px solid var(--szurke-100);
}

/* Szerkesztés modal belső elemek */
.szerk-panel {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 90dvh;
    overflow: hidden;
}

.szerk-fejlec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ter-m) var(--ter-l);
    border-bottom: 1px solid var(--szurke-100);
    flex-shrink: 0;
}

.szerk-cim {
    font-size: 1rem;
    font-weight: 700;
    color: var(--masodik);
}

.szerk-zaro {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--szurke-400);
    padding: 4px 8px;
    border-radius: var(--radius-s);
    line-height: 1;
}

.szerk-zaro:hover {
    background: var(--szurke-100);
    color: var(--szurke-700);
}

.szerk-tartalom {
    padding: var(--ter-m) var(--ter-l);
    overflow-y: auto;
    flex: 1;
}

.szerk-lab {
    display: flex;
    gap: var(--ter-m);
    padding: var(--ter-m) var(--ter-l);
    border-top: 1px solid var(--szurke-100);
    flex-shrink: 0;
}

.btn-felteljes {
    flex: 1;
}

/* Régi modal-tartalom és modal-lab (backwards compat) */
.modal-tartalom {
    padding: 0 var(--ter-l) var(--ter-m);
    overflow-y: auto;
    max-height: 60dvh;
}

.modal-lab {
    display: flex;
    gap: var(--ter-m);
    padding: var(--ter-m) var(--ter-l) var(--ter-l);
    border-top: 1px solid var(--szurke-100);
}

/* ============================================
   MENÜ ÖSSZEÁLLÍTÓ MODAL
   ============================================ */
.mo-forras-racs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: var(--ter-m) 0;
}

.mo-forras-gomb {
    background: var(--szurke-50);
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-m);
    padding: 8px 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    color: var(--szurke-700);
}

.mo-forras-gomb.aktiv {
    background: var(--primer-hatter);
    border-color: var(--primer);
    color: var(--primer-sotet);
    font-weight: 700;
}

.mo-talalatok {
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: var(--ter-s);
}

.mo-talalat-elem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--szurke-100);
}

.mo-talalat-nev {
    flex: 1 1 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--masodik);
}

.mo-mennyiseg-input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-s);
    font-size: 0.85rem;
}

.mo-arany-gombok {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex: 1 1 100%;
}

.mo-arany-gomb {
    background: var(--szurke-50);
    border: 1px solid var(--szurke-200);
    border-radius: var(--radius-s);
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--szurke-700);
}

.mo-arany-gomb.aktiv {
    background: var(--primer-hatter);
    border-color: var(--primer);
    color: var(--primer-sotet);
    font-weight: 700;
}

.mo-osszeallitott-fejlec {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--masodik);
}

.mo-osszeallitott-lista {
    max-height: 160px;
    overflow-y: auto;
}

.mo-osszeallitott-elem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--szurke-100);
}

.mo-osszeallitott-nev {
    flex: 1;
    font-size: 0.88rem;
}

.mo-eltavolit-gomb {
    background: none;
    border: none;
    color: var(--hangsuly);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

.mo-osszesito-sav {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--primer-hatter);
    border-radius: var(--radius-m);
    padding: var(--ter-s) var(--ter-m);
    font-size: 0.9rem;
}

.mo-uj-elelmiszer-link {
    background: none;
    border: none;
    color: var(--primer-sotet);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: underline;
}

/* ============================================
   FŐ CÉL KÁRTYAVÁLASZTÓ (profil + varázsló)
   ============================================ */
.fo-cel-racs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ter-s);
}

.fo-cel-kartya {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--ter-m) var(--ter-s);
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-m);
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    user-select: none;
}

.fo-cel-kartya input[type="radio"] {
    display: none;
}

.fo-cel-kartya:hover {
    border-color: var(--primer);
    background: var(--szurke-50);
}

.fo-cel-kartya.fo-cel-aktiv {
    border-color: var(--primer);
    background: color-mix(in srgb, var(--primer) 8%, #fff);
}

.fo-cel-ikon {
    font-size: 1.5rem;
    line-height: 1;
}

.fo-cel-szoveg {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--masodik);
    line-height: 1.2;
}

.fo-cel-aktiv .fo-cel-szoveg {
    color: var(--primer);
}

.varazslo-fo-cel-racs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--ter-m);
}

.varazslo-fo-cel-racs .fo-cel-kartya {
    min-height: 88px;
    justify-content: center;
    padding: var(--ter-m);
}

.varazslo-fo-cel-racs .fo-cel-szoveg {
    font-size: 0.82rem;
    line-height: 1.3;
}

.kiemelt-kcal-doboz {
    background: linear-gradient(135deg, var(--primer-hatter, #eafaf1), #fff);
    border: 2px solid var(--primer);
    border-radius: var(--radius-m);
    padding: var(--ter-m);
}

.kiemelt-kcal-cimke {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--szurke-600, #555);
    display: block;
    margin-bottom: 6px;
}

.kiemelt-kcal-sor {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.kiemelt-kcal-input {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primer-sotet, #1e8449);
    border: none;
    background: transparent;
    width: 140px;
    padding: 0;
}

.kiemelt-kcal-input:focus {
    outline: none;
    border-bottom: 2px solid var(--primer);
}

/* AI magyarázat doboz */
.ai-magyarazat-doboz {
    background: color-mix(in srgb, var(--siker) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--siker) 30%, #fff);
    border-radius: var(--radius-m);
    padding: var(--ter-m) var(--ter-l);
    font-size: 0.88rem;
    color: var(--masodik);
    line-height: 1.5;
    margin-bottom: var(--ter-m);
}

@media (min-width: 480px) {
    .fo-cel-racs {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .fo-cel-racs {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   EGÉSZSÉGÜGYI ÁLLAPOT KÁRTYÁK (profil.php)
   ============================================ */
.allapot-racs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ter-s);
}

.allapot-kartya {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--ter-m) var(--ter-s);
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-m);
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    user-select: none;
}

.allapot-kartya input[type="checkbox"] {
    display: none;
}

.allapot-kartya:hover {
    border-color: var(--primer);
    background: var(--szurke-50);
}

.allapot-kartya.allapot-aktiv {
    border-color: var(--primer);
    background: color-mix(in srgb, var(--primer) 10%, #fff);
}

.allapot-ikon {
    font-size: 1.5rem;
    line-height: 1;
}

.allapot-szoveg {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--masodik);
    line-height: 1.2;
}

.allapot-aktiv .allapot-szoveg {
    color: var(--primer-sotet);
}

.varazslo-allapot-racs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--ter-m);
}

.varazslo-allapot-racs .allapot-kartya {
    min-height: 88px;
    justify-content: center;
    padding: var(--ter-m);
}

.varazslo-allapot-racs .allapot-szoveg {
    font-size: 0.82rem;
    line-height: 1.3;
}

@media (min-width: 480px) {
    .allapot-racs {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .allapot-racs {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ============================================
   PROFIL TESTSÚLY A FEJLÉCBEN + FIGYELMEZTETÉS
   ============================================ */
.profil-testsuly-sor {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    flex-wrap: wrap;
}

.profil-testsuly-ertek {
    font-weight: 700;
    color: var(--masodik);
}

.profil-ts-valtozas {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}

.ts-csokkent {
    background: color-mix(in srgb, var(--siker) 15%, #fff);
    color: #15803d;
}

.ts-nott {
    background: color-mix(in srgb, var(--hangsuly) 15%, #fff);
    color: #b91c1c;
}

.ts-figyelmeztetes {
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: var(--radius-m);
    padding: var(--ter-m) var(--ter-l);
}

.ts-figy-szoveg {
    font-size: 0.88rem;
    color: #713f12;
    line-height: 1.5;
}

.ts-figy-gomb {
    align-self: flex-start;
}

@media (min-width: 600px) {
    .ts-figyelmeztetes {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .ts-figy-gomb {
        flex-shrink: 0;
    }
}

/* ============================================
   AI PROVIDER KÁRTYAVÁLASZTÓ
   ============================================ */
.ai-provider-racs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-s);
}

.ai-provider-kartya {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--ter-m) var(--ter-s);
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-m);
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    user-select: none;
}

.ai-provider-kartya input[type="radio"] {
    display: none;
}

.ai-provider-kartya:hover {
    border-color: var(--primer);
    background: var(--szurke-50);
}

.ai-provider-kartya.ai-provider-aktiv {
    border-color: var(--primer);
    background: color-mix(in srgb, var(--primer) 8%, #fff);
}

.ai-provider-ikon {
    font-size: 1.3rem;
    line-height: 1;
}

.ai-provider-nev {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--masodik);
    line-height: 1.2;
}

.ai-provider-aktiv .ai-provider-nev {
    color: var(--primer);
}

.ai-provider-leiras {
    font-size: 0.68rem;
    color: var(--szurke-400);
    line-height: 1.2;
}

.ai-provider-info {
    background: var(--szurke-50);
    border-radius: var(--radius-m);
    padding: var(--ter-s) var(--ter-m);
    margin-top: var(--ter-s);
}

.ai-info-szoveg {
    font-size: 0.85rem;
    color: var(--masodik);
    line-height: 1.5;
}

.ai-szerver-kulcs-info {
    font-size: 0.82rem;
    color: var(--szurke-400);
    padding: var(--ter-s) var(--ter-m);
    background: var(--szurke-50);
    border-radius: var(--radius-s);
}

.rejtett {
    display: none !important;
}

/* ============================================
   ADMIN FELÜLET
   ============================================ */

/* Asztali nav admin link kiemelés */
.asztali-nav-link-admin {
    color: #e74c3c !important;
    font-weight: 700;
}

.asztali-nav-link-admin.aktiv,
.asztali-nav-link-admin:hover {
    background: #fff5f5 !important;
    color: #c0392b !important;
}

/* Admin fejléc */
.admin-fejlec {
    margin-bottom: var(--ter-l);
}

.admin-cimke {
    font-size: 0.8rem;
    font-weight: 700;
    color: #e74c3c;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.admin-cim {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--szurke-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ter-s);
}

.admin-db-badge {
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--szurke-100);
    color: var(--szurke-500);
    padding: 2px 10px;
    border-radius: 999px;
}

/* Statisztika kártyák */
.admin-stat-racs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ter-m);
    margin-bottom: var(--ter-l);
}

.admin-stat-kartya {
    background: #fff;
    border-radius: var(--radius-l);
    padding: var(--ter-l);
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    text-align: center;
}

.admin-stat-szam {
    font-size: 2rem;
    font-weight: 800;
    color: var(--szurke-900);
    line-height: 1.1;
}

.admin-szin-primer {
    color: var(--primer);
}

.admin-stat-cimke {
    font-size: 0.8rem;
    color: var(--szurke-400);
    margin-top: 4px;
}

/* Gyors műveletek */
.admin-gyors-racs {
    display: flex;
    flex-direction: column;
    gap: var(--ter-s);
}

.admin-gyors-kartya {
    display: flex;
    align-items: center;
    gap: var(--ter-m);
    padding: var(--ter-m) var(--ter-l);
    background: var(--szurke-50);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.admin-gyors-kartya:hover {
    background: #fff0f0;
}

.admin-gyors-ikon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.admin-gyors-cim {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--szurke-900);
}

.admin-gyors-leiras {
    font-size: 0.8rem;
    color: var(--szurke-400);
}

/* Kereső form */
.admin-kereses-form {
    display: flex;
    gap: var(--ter-s);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.admin-kereses-input {
    flex: 1;
    min-width: 180px;
    padding: 10px 14px;
    border: 2px solid var(--szurke-200);
    border-radius: var(--radius-m);
    font-size: 0.95rem;
    background: var(--szurke-50);
}

.admin-kereses-input:focus {
    outline: none;
    border-color: var(--primer);
    background: #fff;
}

/* Meghívó form */
.admin-meghivo-form {
    display: flex;
    gap: var(--ter-s);
    flex-wrap: wrap;
    align-items: center;
}

.admin-meghivo-form .form-input {
    flex: 1;
    min-width: 160px;
}

/* Táblázat */
.admin-tabla-kartya {
    overflow: hidden;
}

.admin-tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 600px;
}

.admin-tabla thead th {
    background: var(--szurke-50);
    padding: 10px 12px;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--szurke-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 2px solid var(--szurke-200);
}

.admin-tabla tbody tr {
    border-bottom: 1px solid var(--szurke-100);
    transition: background 0.12s;
}

.admin-tabla tbody tr:hover {
    background: var(--szurke-50);
}

.admin-tabla tbody td {
    padding: 10px 12px;
    vertical-align: middle;
}

.admin-td-id {
    color: var(--szurke-400);
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-td-datum {
    white-space: nowrap;
    color: var(--szurke-500);
    font-size: 0.85rem;
}

.admin-td-center {
    text-align: center;
}

.admin-felh-nev {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--szurke-900);
}

.admin-felh-email {
    font-size: 0.8rem;
    color: var(--szurke-400);
}

/* Badge-ek */
.admin-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-badge-admin {
    background: #fef3cd;
    color: #856404;
    border: 1px solid #fdd835;
}

.admin-badge-user {
    background: var(--szurke-100);
    color: var(--szurke-600);
}

.admin-badge-aktiv {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.admin-badge-inaktiv {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Aktív toggle gomb (badge stílusban) */
.admin-aktiv-toggle {
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}

.admin-aktiv-toggle:hover {
    opacity: 0.75;
}

/* Mini action gombok */
.admin-mini-btn {
    background: var(--szurke-100);
    border: none;
    border-radius: var(--radius-s);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.admin-mini-btn:hover {
    background: var(--szurke-200);
}

.admin-mini-btn-veszelyes:hover {
    background: #f8d7da;
}

.admin-muvelet-sor {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Szűrő infó sor */
.admin-szuro-info {
    display: flex;
    align-items: center;
    gap: var(--ter-s);
    flex-wrap: wrap;
    padding: var(--ter-s) var(--ter-m);
    background: #fff3cd;
    border-radius: var(--radius-m);
    font-size: 0.9rem;
    margin-bottom: var(--ter-m);
}

.ml-m { margin-left: var(--ter-m); }

/* Funkciók táblázat */
/* Funkciók kártyás rács */
.admin-funkciok-kartya-racs {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ter-m);
    margin-bottom: var(--ter-l);
}

.admin-funk-kartya {
    padding: var(--ter-l);
}

.admin-funk-kartya-fejlec {
    margin-bottom: var(--ter-m);
    padding-bottom: var(--ter-s);
    border-bottom: 2px solid var(--szurke-100);
}

.admin-funkció-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-funkció-sor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--szurke-100);
    font-size: 0.9rem;
}

.admin-funkció-sor:last-child {
    border-bottom: none;
}

.admin-funkció-nev {
    color: var(--szurke-700);
}

.admin-funkció-toggle {
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-funkció-toggle:hover {
    opacity: 0.82;
    transform: scale(1.04);
}

.admin-toggle-on {
    background: #d4edda;
    color: #155724;
}

.admin-toggle-off {
    background: #f8d7da;
    color: #721c24;
}

@media (min-width: 600px) {
    .admin-funkciok-kartya-racs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .admin-funkciok-kartya-racs {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .admin-stat-racs { grid-template-columns: repeat(2, 1fr); }
    .admin-meghivo-form { flex-direction: column; }
    .admin-meghivo-form .btn { width: 100%; }
}

/* Kötelező mező jelölés */
.kotelezo-csillag {
    color: #e74c3c;
    font-weight: 700;
    margin-left: 2px;
}

.kotelezo-megjegyzes {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 4px;
}