/* ==============================================================================
   Adventi Kalendárium - Meleg, Hagyományos Ünnepi Stílus (Handcrafted Christmas)
   ============================================================================== */

:root {
    /* Meleg, természetes karácsonyi színek (hideg neon és üveghatások nélkül) */
    --bg-base: #141011;               /* Mély meleg fenyő / gesztenye háttér */
    --bg-surface: #1e1719;            /* Tömör, meleg fa/papír felület */
    --bg-surface-elevated: #281f21;   /* Enyhén kiemelt dobozok */
    --bg-door-closed: #3a1c22;        /* Zárt naptárajtó: mély bordó/cseresznyefa */
    --bg-door-opened: #2a1e1b;        /* Kinyitott ablak: meleg, gyertyafényes kamra */
    --bg-door-locked: #181314;        /* Zárolt ajtó */
    
    --crimson: #9e2a2b;               /* Hagyományos bordó/karácsonyi piros */
    --crimson-hover: #b83234;
    --pine-green: #254431;            /* Természetes mély fenyőzöld */
    --pine-dark: #192e21;
    --gold: #d4a359;                  /* Régi antik arany / sárgaréz */
    --gold-light: #ebd09e;
    --gold-dark: #a37532;
    
    --cream: #fbf5eb;                 /* Meleg törtfehér / gyertyafényes szöveg */
    --cream-muted: #c9bea9;           /* Lágy, természetes másodlagos szövegszín */
    --border-warm: #3d2c2f;           /* Tömör meleg szegély */
    --border-gold: rgba(212, 163, 89, 0.45);
    --border-dashed: #4a383b;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-warm: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
}

body.advent-theme {
    background: radial-gradient(ellipse at 50% 15%, #2a1b1e 0%, #1a1214 55%, #100b0d 100%);
    color: var(--cream);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    line-height: 1.5;
}

/* Finom, lassú hóesés vászon */
.snow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
}

/* ==============================================================================
   Fejléc és Navigáció (Tömör meleg fa stílus, nem üveghatás)
   ============================================================================== */

.navbar {
    background: #181214;
    border-bottom: 2px solid var(--border-warm);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tree-icon {
    font-size: 1.5rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-item {
    text-decoration: none;
    color: var(--cream);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    background: #241a1d;
    border: 1px solid var(--border-warm);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-item:hover {
    background: #312327;
    border-color: var(--gold);
    color: var(--gold-light);
}

.nav-item.user-pill {
    background: #2a1f22;
    border-color: var(--border-gold);
    color: var(--gold);
    font-weight: 600;
}

.btn-gift-nav {
    background: var(--crimson);
    border: 1px solid #c23843;
    color: #ffffff !important;
    font-weight: 600;
}

.btn-gift-nav:hover {
    background: var(--crimson-hover);
    color: #ffffff;
}

.btn-logout {
    opacity: 0.85;
}

.btn-logout:hover {
    opacity: 1;
    color: #fca5a5;
    border-color: #ef4444;
}

.family-quick-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-label {
    font-size: 0.85rem;
    color: var(--cream-muted);
}

.quick-user-btn {
    text-decoration: none;
    color: var(--cream);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: #241a1d;
    border: 1px solid var(--border-warm);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.quick-user-btn:hover {
    background: var(--gold);
    color: #1a1214;
    border-color: var(--gold);
}

/* ==============================================================================
   Értesítések (Flash)
   ============================================================================== */

.flash-container {
    max-width: 900px;
    margin: 14px auto 0;
    padding: 0 20px;
    width: 100%;
}

.alert {
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    box-shadow: var(--shadow-warm);
}

.alert-success {
    background: #1c3826;
    border: 1px solid #2e7d32;
    color: #e8f5e9;
}

.alert-danger {
    background: #4a191c;
    border: 1px solid #c62828;
    color: #ffebee;
}

.alert-warning {
    background: #422b11;
    border: 1px solid #d4a359;
    color: #fff8e1;
}

.alert-info {
    background: #19263b;
    border: 1px solid #2563eb;
    color: #eff6ff;
}

.alert-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    margin-left: 12px;
}

.alert-close:hover {
    opacity: 1;
}

/* ==============================================================================
   Főoldal & Természetes gombok
   ============================================================================== */

.main-wrapper {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 80px;
    width: 100%;
}

.btn-primary {
    background: var(--crimson);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid #b83234;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: var(--crimson-hover);
    color: #ffffff;
}

.btn-secondary {
    background: #2a1f22;
    color: var(--cream);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-warm);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #36282c;
    border-color: var(--gold);
    color: var(--gold-light);
}

.btn-block {
    width: 100%;
}

.btn-mt {
    margin-top: 14px;
}

/* Hero szekció (Természetes, meleg családi feliratok) */
.hero-section {
    text-align: center;
    margin-bottom: 36px;
}

.hero-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-md);
    padding: 32px 24px;
    box-shadow: var(--shadow-warm);
    max-width: 760px;
    margin: 0 auto;
}

.brand-text {
    letter-spacing: 0.12em;
    word-spacing: 0.22em;
}

.hero-title {
    font-family: 'Cinzel', serif;
    font-size: 2.3rem;
    color: var(--gold);
    margin-bottom: 14px;
    letter-spacing: 0.16em;
    word-spacing: 0.35em;
    text-transform: uppercase;
}

.hero-family-names {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: var(--cream);
    letter-spacing: 0.24em;
    word-spacing: 0.55em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 600;
}

.hero-subtext {
    font-size: 1rem;
    color: var(--cream-muted);
    max-width: 580px;
    margin: 0 auto 20px;
    line-height: 1.6;
}

.status-ribbon {
    display: inline-block;
    padding: 6px 18px;
    border-radius: var(--radius-sm);
    background: #254431;
    border: 1px solid #336144;
    color: #e2f0d9;
    font-size: 0.92rem;
    font-weight: 600;
}

/* Családtagok kártyái a kezdőlapon */
.family-grid-section {
    max-width: 1050px;
    margin: 0 auto 40px;
}

.family-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    justify-content: center;
}

.family-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-warm);
}

.family-card:hover {
    border-color: var(--gold);
    background: var(--bg-surface-elevated);
    transform: translateY(-3px);
}

.card-avatar {
    font-size: 3rem;
    margin-bottom: 10px;
}

.card-name {
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    color: var(--gold);
    margin-bottom: 12px;
}

.card-action-btn {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cream-muted);
    background: #291d20;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-warm);
    transition: all 0.2s;
}

.family-card:hover .card-action-btn {
    color: var(--gold);
    border-color: var(--gold);
}

/* ==============================================================================
   PIN Kód Képernyő
   ============================================================================== */

.pin-screen-container {
    max-width: 400px;
    margin: 30px auto;
}

.pin-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-md);
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--shadow-warm);
}

.pin-avatar {
    font-size: 3rem;
    display: block;
    margin-bottom: 8px;
}

.pin-user-name {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 14px;
}

.pin-header-text h3 {
    font-size: 1.1rem;
    color: var(--cream);
    margin-bottom: 6px;
}

.pin-header-text p {
    font-size: 0.88rem;
    color: var(--cream-muted);
    margin-bottom: 20px;
    line-height: 1.4;
}

.pin-input {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: #141011;
    border: 1px solid var(--border-warm);
    color: var(--gold);
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 12px;
    font-family: monospace;
    outline: none;
    margin-bottom: 16px;
}

.pin-input:focus {
    border-color: var(--gold);
}

.pin-input-large {
    font-size: 1.8rem;
    letter-spacing: 14px;
}

.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 250px;
    margin: 0 auto 16px;
}

.num-key {
    background: #281d20;
    border: 1px solid var(--border-warm);
    color: var(--cream);
    font-size: 1.3rem;
    font-weight: 600;
    height: 50px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.num-key:active, .num-key:hover {
    background: var(--gold);
    color: #141011;
    border-color: var(--gold);
}

.num-key.num-action {
    font-size: 1rem;
    color: var(--cream-muted);
}

.pin-remember-note {
    font-size: 0.8rem;
    color: var(--cream-muted);
    margin-top: 14px;
}

.pin-footer-links {
    margin-top: 20px;
    border-top: 1px solid var(--border-warm);
    padding-top: 14px;
}

.back-link {
    color: var(--cream-muted);
    text-decoration: none;
    font-size: 0.88rem;
}

.back-link:hover {
    color: var(--gold);
}

/* ==============================================================================
   Adventi Naptár Nézet (Valódi naptár-ablak formák)
   ============================================================================== */

.calendar-header {
    background: var(--bg-surface);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-warm);
}

.calendar-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.calendar-avatar {
    font-size: 2.8rem;
}

.calendar-title {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    color: var(--gold);
}

.calendar-subtitle {
    font-size: 0.9rem;
    color: var(--cream-muted);
}

.calendar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.progress-badge {
    background: #254431;
    border: 1px solid #336144;
    color: #e2f0d9;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
}

/* 24-Day Calendar Windows Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

@media (min-width: 900px) {
    .calendar-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Klasszikus adventi naptár ablak stílus */
.calendar-day-card {
    border-radius: 10px 10px 4px 4px; /* Ívelt felső rész, mint egy hagyományos ablak */
    min-height: 200px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: var(--shadow-warm);
    transition: all 0.2s ease;
}

/* A nap száma a bal felső sarokban */
.day-number-badge {
    display: flex;
    align-items: baseline;
    gap: 4px;
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 2;
}

.day-num {
    font-family: 'Cinzel', serif;
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}

.day-month {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cream-muted);
    letter-spacing: 1px;
}

/* ÁLLAPOT 1: ZÁRT (LOCKED - Jövőbeli nap) */
.card-locked {
    background: var(--bg-door-locked);
    border: 1px solid #2a2022;
    opacity: 0.7;
}

.day-content-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-top: 24px;
    text-align: center;
}

.lock-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.lock-icon {
    font-size: 1.8rem;
    color: var(--cream-muted);
    opacity: 0.5;
}

.lock-label {
    font-size: 0.85rem;
    color: var(--cream-muted);
    font-weight: 600;
}

.lock-hint {
    font-size: 0.75rem;
    color: #8c7e80;
}

/* ÁLLAPOT 2: KIBONTHATÓ (UNLOCKED - Nyitásra kész ablak) */
.card-unlocked {
    background: var(--bg-door-closed);
    border: 2px solid #5c2b33;
    border-top: 3px solid #7a3640;
}

.card-unlocked:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

.day-content-unopened {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-top: 20px;
    text-align: center;
}

.gift-box-visual {
    margin-bottom: 12px;
}

.gift-box-icon {
    font-size: 2.8rem;
}

.btn-open-door {
    background: var(--gold);
    color: #141011;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid #c99645;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.2s;
    width: 100%;
}

.btn-open-door:hover {
    background: var(--gold-light);
}

/* ÁLLAPOT 3: KIBONTVA (OPENED - Kinyitott ablak) */
.card-opened {
    background: var(--bg-door-opened);
    border: 2px solid #4a3429;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.day-content-opened {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin-top: 26px;
}

.opened-status-tag {
    font-size: 0.72rem;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.opened-gifts-summary {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.gift-mini-preview {
    background: #1c1412;
    border: 1px solid #423028;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.gift-mini-preview:hover {
    background: #251a18;
    border-color: var(--gold);
}

.gift-mini-sender-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sender-pill {
    background: #3d261e;
    border: 1px solid #6b4334;
    color: var(--gold-light);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.sender-pill.quote-pill {
    background: #2b2220;
    border-color: #473734;
    color: var(--cream-muted);
}

.gift-mini-title-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.gift-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1.2;
}

.gift-mini-title {
    font-size: 0.85rem;
    color: var(--cream);
    font-weight: 600;
    line-height: 1.35;
}

.btn-view-opened {
    background: #2a1e1b;
    border: 1px solid #47352f;
    color: var(--cream);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}

.btn-view-opened:hover {
    background: #3d2c27;
    color: var(--gold-light);
    border-color: var(--gold);
}

/* ==============================================================================
   Nagy Olvasóablak (Modal)
   ============================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 8, 9, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-card {
    background: #241b1d;
    border: 2px solid var(--gold);
    border-radius: var(--radius-md);
    max-width: 600px;
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: #181214;
    border: 1px solid var(--border-warm);
    color: var(--cream);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--crimson);
    color: #fff;
}

.modal-header {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--border-warm);
}

.modal-day-badge {
    display: inline-block;
    background: var(--gold);
    color: #141011;
    font-family: 'Cinzel', serif;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}

.modal-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    color: var(--cream);
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-gift-card {
    background: #1c1517;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-sm);
    padding: 18px;
}

.modal-sender-highlight {
    background: #2d1d22;
    border: 1px solid #5a333c;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-sender-badge {
    background: var(--gold);
    color: #141011;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 2px;
    text-transform: uppercase;
}

.modal-sender-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.modal-sender-intro {
    font-size: 0.78rem;
    color: var(--cream-muted);
}

.modal-sender-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
}

.modal-gift-headline {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 10px;
    line-height: 1.35;
}

.modal-gift-message {
    font-size: 1rem;
    line-height: 1.6;
    color: #f3ede2;
    white-space: pre-wrap;
    margin-bottom: 14px;
}

.modal-gift-image {
    margin-top: 10px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-warm);
}

.modal-gift-image img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    display: block;
}

.modal-gift-signature {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--gold);
    border-top: 1px dashed var(--border-warm);
    padding-top: 10px;
    margin-top: 8px;
    text-align: right;
}

.modal-quote-card {
    background: #1f1719;
    border: 1px dashed var(--border-warm);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
}

.modal-quote-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--gold);
    margin-bottom: 6px;
}

.modal-quote-text {
    color: var(--cream);
    font-size: 0.95rem;
    line-height: 1.5;
}

.modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border-warm);
    display: flex;
    justify-content: flex-end;
}

/* ==============================================================================
   Naptár-Szerkesztő (Ajándékok elrejtése)
   ============================================================================== */

.editor-page-container {
    max-width: 1200px;
    margin: 0 auto;
}

.editor-header-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-md);
    padding: 26px 20px;
    box-shadow: var(--shadow-warm);
    margin-bottom: 24px;
    text-align: center;
}

.editor-festive-badge {
    display: inline-block;
    background: #281d20;
    border: 1px solid var(--border-gold);
    color: var(--gold);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

.editor-title {
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    color: var(--cream);
    margin-bottom: 8px;
}

.editor-subtitle {
    font-size: 0.95rem;
    color: var(--cream-muted);
    max-width: 600px;
    margin: 0 auto 20px;
}

.recipient-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.recipient-tab-btn {
    text-decoration: none;
    background: #241a1d;
    border: 1px solid var(--border-warm);
    color: var(--cream);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.recipient-tab-btn:hover {
    background: #2f2125;
    border-color: var(--gold);
}

.recipient-tab-btn.active {
    background: #3d2328;
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 700;
}

.tab-avatar {
    font-size: 1.25rem;
}

.tab-self-badge {
    font-size: 0.72rem;
    color: var(--cream-muted);
}

.editor-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #181214;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.88rem;
}

.stats-text strong {
    color: var(--gold);
}

.stats-hint {
    color: var(--cream-muted);
    font-size: 0.82rem;
}

/* Szerkesztő rács (Kompakt 24-napos naptár) */
.editor-calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

@media (min-width: 1024px) {
    .editor-calendar-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }
}

@media (max-width: 1023px) and (min-width: 601px) {
    .editor-calendar-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}

.editor-day-card {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    min-height: 105px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: var(--shadow-warm);
    transition: all 0.2s ease;
}

.editor-day-badge {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
}

.editor-day-num {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}

.editor-day-month {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--cream-muted);
    letter-spacing: 0.5px;
}

.special-day-tag {
    font-size: 0.68rem;
    background: #421c21;
    border: 1px solid #6b2b33;
    color: #fca5a5;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

.day-filled {
    border: 1px solid #3d5241;
    background: #1a221c;
}

.editor-day-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.editor-gift-item {
    background: #131915;
    border: 1px solid #2d3f31;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.gift-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}

.gift-type-pill {
    font-size: 0.68rem;
    background: #2d3f31;
    color: var(--gold);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}

.opened-pill {
    font-size: 0.68rem;
    background: #254431;
    color: #a7f3d0;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}

.gift-item-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    word-break: break-word;
}

.gift-item-desc {
    font-size: 0.73rem;
    color: var(--cream-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gift-item-thumbnail img {
    width: 100%;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    border: 1px solid var(--border-warm);
    margin: 2px 0;
}

.gift-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #28372b;
    padding-top: 4px;
    margin-top: 2px;
    gap: 4px;
}

.gift-item-signature {
    font-size: 0.7rem;
    color: var(--cream-muted);
}

.gift-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-edit-gift {
    background: #253328;
    border: 1px solid #3e5442;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-edit-gift:hover {
    background: var(--gold);
    color: #141011;
}

.btn-delete-gift {
    background: none;
    border: 1px solid #5a272b;
    color: #fca5a5;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
}

.btn-delete-gift:hover {
    background: #421c21;
}

.btn-add-another-gift {
    background: #18201a;
    border: 1px dashed #2f4434;
    color: var(--cream-muted);
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
    cursor: pointer;
    width: 100%;
    margin-top: 3px;
    transition: all 0.2s;
}

.btn-add-another-gift:hover {
    background: #243026;
    color: var(--gold);
}

/* Üres nap */
.day-empty {
    border: 1px dashed var(--border-dashed);
    background: #181214;
    cursor: pointer;
}

.day-empty:hover {
    border-color: var(--gold);
    background: #22181b;
}

.editor-day-empty-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    gap: 4px;
    padding: 10px 4px;
}

.empty-plus-icon {
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 300;
    color: var(--gold);
    opacity: 0.75;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.day-empty:hover .empty-plus-icon {
    transform: scale(1.25);
    opacity: 1;
    color: var(--gold-light);
}

.modal-card-editor {
    max-width: 620px;
}

.modal-subheading {
    font-size: 0.92rem;
    color: var(--gold);
    margin-top: 4px;
}

/* ==============================================================================
   Űrlapok
   ============================================================================== */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.form-group label {
    font-size: 0.9rem;
    color: var(--cream);
}

.form-select, .form-input, .form-textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: #141011;
    border: 1px solid var(--border-warm);
    color: var(--cream);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
}

.form-select option {
    background: #1e1719;
    color: var(--cream);
}

.form-select:focus, .form-input:focus, .form-textarea:focus {
    border-color: var(--gold);
}

.form-help {
    font-size: 0.76rem;
    color: var(--cream-muted);
}

.gift-type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.radio-card {
    cursor: pointer;
}

.radio-card input {
    display: none;
}

.radio-content {
    background: #181214;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-sm);
    padding: 10px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.radio-card input:checked + .radio-content {
    background: #3a2228;
    border-color: var(--gold);
    color: var(--gold);
}

.type-icon {
    font-size: 1.4rem;
}

.type-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.file-upload-box {
    position: relative;
    border: 2px dashed var(--border-dashed);
    border-radius: var(--radius-sm);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    background: #181214;
}

.file-upload-box:hover {
    border-color: var(--gold);
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

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

.dummy-icon {
    font-size: 1.8rem;
}

.dummy-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
}

.image-preview-container {
    position: relative;
    max-width: 280px;
    margin: 0 auto;
}

.image-preview-container img {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-gold);
    display: block;
}

.btn-remove-preview {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--crimson);
    color: #fff;
    border: none;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
}

/* ==============================================================================
   Általam Elrejtett Ajándékok Lista
   ============================================================================== */

.my-gifts-container {
    max-width: 1000px;
    margin: 0 auto;
}

.my-gifts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.page-title {
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    color: var(--gold);
}

.page-subtitle {
    font-size: 0.92rem;
    color: var(--cream-muted);
}

.sent-gifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.sent-gift-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-sm);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-warm);
}

.sent-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-warm);
    padding-bottom: 8px;
}

.recipient-tag {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recipient-avatar {
    font-size: 1.4rem;
}

.recipient-name {
    font-weight: 700;
    color: var(--gold);
    font-size: 0.95rem;
}

.day-tag {
    background: #281d20;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
}

.sent-gift-title {
    font-size: 1.1rem;
    color: var(--cream);
    margin-bottom: 6px;
}

.sent-gift-message {
    font-size: 0.9rem;
    color: var(--cream-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

.sent-photo-preview {
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-height: 150px;
}

.sent-photo-preview img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
}

.status-badge.opened {
    background: #1c3826;
    border: 1px solid #2e7d32;
    color: #a7f3d0;
}

.status-badge.waiting {
    background: #3d2815;
    border: 1px solid #d4a359;
    color: var(--gold-light);
}

.sent-card-footer {
    margin-top: 14px;
    border-top: 1px solid var(--border-warm);
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.signed-as {
    font-size: 0.78rem;
    color: var(--cream-muted);
}

.btn-delete {
    background: none;
    border: 1px solid #5a272b;
    color: #fca5a5;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-delete:hover {
    background: #421c21;
}

.empty-state-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-md);
    padding: 40px 20px;
    text-align: center;
    max-width: 560px;
    margin: 30px auto;
}

.empty-icon {
    font-size: 3.5rem;
    margin-bottom: 12px;
}

/* ==============================================================================
   Lábléc
   ============================================================================== */

.footer {
    border-top: 1px solid var(--border-warm);
    background: #141011;
    padding: 16px 20px;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--cream-muted);
}

.footer-content p {
    letter-spacing: 0.16em;
    word-spacing: 0.35em;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.snow-toggle-btn {
    background: #241a1d;
    border: 1px solid var(--border-warm);
    color: var(--cream);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    cursor: pointer;
}

.snow-toggle-btn:hover {
    border-color: var(--gold);
}

.hidden {
    display: none !important;
}

/* Mobilos nézet (Okostelefonokra optimalizálva) */
@media (max-width: 600px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    .main-wrapper {
        padding: 14px 10px 50px;
    }

    /* Fejléc és navigáció */
    .nav-container {
        padding: 10px 12px;
        justify-content: center;
        gap: 8px;
    }

    .brand-logo {
        font-size: 1.15rem;
        gap: 6px;
    }

    .tree-icon {
        font-size: 1.3rem;
    }

    .nav-links {
        justify-content: center;
        gap: 5px;
        width: 100%;
    }

    .nav-item {
        padding: 5px 9px;
        font-size: 0.8rem;
    }

    .family-quick-links {
        justify-content: center;
        gap: 5px;
        width: 100%;
    }

    .quick-label {
        font-size: 0.78rem;
    }

    .quick-user-btn {
        padding: 4px 8px;
        font-size: 0.78rem;
    }

    /* Főoldal */
    .hero-card {
        padding: 18px 12px;
        margin-bottom: 18px;
    }

    .hero-title {
        font-size: 1.65rem;
        margin-bottom: 8px;
    }

    .hero-subtext {
        font-size: 0.88rem;
        line-height: 1.45;
        margin-bottom: 12px;
    }

    .status-ribbon {
        font-size: 0.82rem;
        padding: 5px 12px;
    }

    .family-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .family-card {
        padding: 16px 8px;
    }

    .family-card:last-child:nth-child(odd) {
        grid-column: span 2;
        max-width: 240px;
        margin: 0 auto;
        width: 100%;
    }

    .card-avatar {
        font-size: 2.2rem;
        margin-bottom: 6px;
    }

    .card-name {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }

    .card-action-btn {
        font-size: 0.76rem;
        padding: 4px 8px;
    }

    /* PIN képernyő */
    .pin-screen-container {
        max-width: 320px;
        padding: 0 8px;
    }

    .pin-card {
        padding: 20px 14px;
    }

    .numpad-grid {
        max-width: 210px;
        gap: 7px;
    }

    .num-key {
        height: 44px;
        font-size: 1.2rem;
    }

    /* Naptár nézet */
    .calendar-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 14px 12px;
        gap: 12px;
        margin-bottom: 16px;
    }

    .calendar-user-info {
        justify-content: center;
        gap: 10px;
    }

    .calendar-avatar {
        font-size: 2.2rem;
    }

    .calendar-title {
        font-size: 1.35rem;
    }

    .calendar-subtitle {
        font-size: 0.82rem;
    }

    .calendar-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .btn-gift-action {
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
        font-size: 0.88rem;
    }

    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .calendar-day-card {
        min-height: 140px;
        padding: 8px;
    }

    .gift-box-icon {
        font-size: 2.2rem;
    }

    .btn-open-door {
        padding: 6px 10px;
        font-size: 0.82rem;
    }

    .btn-view-opened {
        padding: 5px 8px;
        font-size: 0.78rem;
    }

    .day-num {
        font-size: 1.2rem;
    }

    .day-month {
        font-size: 0.65rem;
    }

    /* Ajándék elrejtése / Szerkesztő nézet */
    .editor-header-card {
        padding: 14px 12px;
        margin-bottom: 14px;
    }

    .editor-title {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .recipient-tabs {
        gap: 6px;
        margin-bottom: 12px;
    }

    .recipient-tab-btn {
        padding: 6px 12px;
        font-size: 0.84rem;
    }

    .editor-stats-bar {
        padding: 8px 10px;
        font-size: 0.78rem;
        justify-content: center;
        text-align: center;
    }

    .editor-calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .editor-day-card {
        min-height: 90px;
        padding: 6px 8px;
    }

    .editor-day-num {
        font-size: 1.1rem;
    }

    .editor-day-empty-trigger {
        padding: 8px 4px;
        gap: 2px;
    }

    .empty-plus-icon {
        font-size: 1.6rem;
    }

    /* Modális ablakok */
    .modal-overlay {
        padding: 10px;
    }

    .modal-card {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        margin: 0;
    }

    .modal-header {
        padding: 14px 14px 10px;
    }

    .modal-title {
        font-size: 1.25rem;
    }

    .modal-body {
        padding: 12px 14px;
        max-height: calc(92vh - 130px);
        overflow-y: auto;
    }

    .modal-footer {
        padding: 10px 14px;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .modal-footer button {
        width: 100%;
    }

    .gift-type-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .radio-card {
        padding: 8px 4px;
        text-align: center;
    }

    .radio-content .type-name {
        font-size: 0.8rem;
    }

    /* Elrejtett ajándékaim */
    .my-gifts-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .page-title {
        font-size: 1.35rem;
    }

    .sent-gifts-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sent-gift-card {
        padding: 14px 12px;
    }

    /* Lábléc */
    .footer-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}