/* --- Sötét Téma Változók --- */
:root {
    --bg-color: #121214;
    --card-bg: #1a1a1e;
    --text-main: #e1e1e6;
    --text-muted: #a8a8b3;
    --accent-color: #00b37e;
    --border-color: #29292e;
    --category-bg: #202024;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    padding: 15px;
    display: flex;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 500px; /* Kompaktabb szélesség mobilhoz */
}

/* --- Fejléc és Bejelentkezés Gomb --- */
header {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 10px;
}

header h1 {
    font-size: 1.6rem;
    margin-bottom: 3px;
}

header p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.login-btn {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.login-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: #1c2c26;
}

/* --- Navigációs Tabok --- */
.navigation {
    display: flex;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px;
    margin-bottom: 15px;
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    transition: all 0.2s ease;
}

.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { background-color: var(--accent-color); color: #ffffff; }

/* --- Lista elemek és Kategóriák --- */
.content-section { display: none; }
.content-section.active { display: block; }

.category-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 15px 0 6px 5px;
    padding-left: 5px;
    border-left: 3px solid var(--accent-color);
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Kompakt távolság */
}

.item-card {
    display: flex;
    align-items: center;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
}

/* --- FIX Kisebb Képek (50x50px) --- */
.item-image {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    background-color: var(--category-bg);
    border-radius: 4px;
    object-fit: cover;
    margin-right: 12px;
    border: 1px solid var(--border-color);
}

.item-details { flex: 1; }
.item-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
.item-meta { font-size: 0.75rem; color: var(--text-muted); }
.item-price-box { text-align: right; }
.item-price { font-size: 1rem; font-weight: 700; color: var(--accent-color); }

/* --- Mobilos igazítások szűk helyre --- */
@media (max-width: 480px) {
    header h1 { padding-top: 35px; } /* Nem csúszik rá a gomb a címre */
    .login-btn { top: 0; right: 5px; }
    body { padding: 8px; }
    .tab-btn { font-size: 0.8rem; padding: 8px 4px; }
    .item-name { font-size: 0.9rem; }
    .item-price { font-size: 0.95rem; }
}