/* =========================================
   MARK YOURS - CORE ENGINE (CLEANED)
   Optimized for: index.php & vote.php
   ========================================= */
/* =========================================
   LOCAL FONTS (OFFLINE MODE)
   ========================================= */

/* --- ORBITRON (Címekhez) --- */
@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron-Black.ttf') format('truetype'); /* Ha nincs Black, használd a Bold-ot ide is */
    font-weight: 900;
    font-style: normal;
}

/* --- RAJDHANI (Szöveghez) --- */
@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Regular.ttf') format('truetype');
    font-weight: 400; /* Normál */
    font-style: normal;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Medium.ttf') format('truetype');
    font-weight: 500; /* Közepes */
    font-style: normal;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('fonts/Rajdhani-Bold.ttf') format('truetype');
    font-weight: 700; /* Vastag */
    font-style: normal;
}


:root {
    /* --- TÉMA VÁLTOZÓK --- */
    
    /* Színek */
    --color-primary: #00f3ff;       /* Neon Kék */
    --color-primary-dim: rgba(0, 243, 255, 0.1);
    --color-primary-glow: rgba(0, 243, 255, 0.3);
    
    --color-accent: #bc13fe;        /* Neon Pink */
    --color-accent-dim: rgba(188, 19, 254, 0.1);
    
    --color-tertiary: #d900ff;      /* Neon Lila */

    --color-success: #39ff14;       /* Zöld */
    --color-warning: #ffcc00;       /* Sárga */
    --color-warning-dim: rgba(255, 204, 0, 0.1);
    
    --color-danger: #dc3545;        
    --color-danger-dim: rgba(220, 53, 69, 0.15);
    --color-danger-pure: #dc3545;

    /* Hátterek */
    --bg-body: #050a14;
    --bg-card: rgba(10, 20, 40, 0.6);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-input: rgba(0, 0, 0, 0.5);
    --bg-hover: rgba(255, 255, 255, 0.1);
    
    /* Szöveg */
    --text-main: #ffffff;
    --text-muted: #888888;
    --text-dark: #000000;

    /* Keretek */
    --border-color: rgba(0, 243, 255, 0.3);
    --border-color-dim: #444444;
    
    --border-radius-card: 15px;
    --border-radius-btn: 5px;
    
    /* Tipográfia */
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    /* Dinamikus Alert Pozíció */
    --ui-top-offset: 30px; 
}

/* =========================================
   1. GLOBAL RESET & BASE
   ========================================= */
html { 
    scrollbar-gutter: stable; 
    scroll-behavior: auto !important;
}

body { 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    font-family: var(--font-body); 
    min-height: 100vh; 
    padding-bottom: 0px; 
    overflow-x: hidden; 
}

/* Háttér */
.fixed-bg { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; 
    background-image: url('backgrounds/my_bg.jpg'); 
    background-size: cover; background-position: center; background-repeat: no-repeat; 
}
body::before { 
    content: ''; position: fixed; top:0; left:0; width:100%; height:100%; 
    background: var(--bg-overlay); z-index: -1; backdrop-filter: blur(2px); 
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); text-transform: uppercase; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--color-primary-glow); border-radius: 4px; border: 1px solid rgba(0, 243, 255, 0.5); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* =========================================
   2. LAYOUT & TYPOGRAPHY
   ========================================= */
.header-container { 
    margin-bottom: 2rem; /* Kicsit visszavettünk a 3rem-ből */
    margin-top: 1rem !important;   /* ÚJ: Hogy ne tapadjon a képernyő tetejére notebookon */
    text-align: center; 
    position: relative; 
}

.main-title { 
    font-family: var(--font-head); 
    color: var(--text-main); 
    
    /* CLAMP: Minimum 1.5rem (mobil), Ideális 5vw, Maximum 3rem (desktop) */
    font-size: clamp(1.3rem, 5vw, 2.5rem); 
    
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    text-shadow: 0 0 20px rgba(0,0,0,0.8); 
    margin: 0; 
    line-height: 1.1; /* Kicsit szorosabb sorköz, hogy ne essen szét */
}

.sub-title, #mission-label { 
    font-family: var(--font-head); 
    color: var(--text-main); 
    
    /* CLAMP: Minimum 0.75rem (kicsi), Max 1rem (normál) */
    font-size: clamp(0.75rem, 2.5vw, 1rem);
    
    letter-spacing: 3px; 
    font-weight: 400; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
    opacity: 0.9; 
}

#mission-label::before { content: "THE EVENT:"; }

.mission-description {
    font-family: var(--font-body);
    
    /* MÉRET: Clamp-olva (Mobilon 0.9rem -> Desktopon 1.15rem) */
    font-size: clamp(0.9rem, 3vw, 1.15rem);
    
    /* SZÍN: Kék helyett tiszta "Ezüst-Fehér" (sokkal elegánsabb) */
    color: rgba(255, 255, 255, 0.85); 
    
    text-transform: none; 
    letter-spacing: 0.5px; /* Kicsit olvashatóbb */
    
    margin-top: 5px; 
    margin-bottom: 25px;
    max-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: 1.4;
    font-weight: 500;
    
    /* Kivettem a kék ragyogást is (text-shadow), maradjon tiszta */
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
}

/* Glass Panel */
.glass-panel { 
    background: var(--bg-card); 
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); 
    border: 1px solid var(--border-color); border-radius: var(--border-radius-card); 
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0,0,0,0.5); 
    color: #e0e0e0; transition: box-shadow 0.3s ease, border-color 0.5s ease; position: relative; 
}

/* Szöveg segédosztályok */
.text-neon { color: var(--color-primary) !important; text-shadow: 0 0 10px var(--color-primary); }
.text-neon-dim { color: rgba(0, 243, 255, 0.7); text-shadow: 0 0 5px rgba(0, 243, 255, 0.3); } 
.text-neon-pink { color: var(--color-accent) !important; text-shadow: 0 0 10px var(--color-accent); }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }

/* Admin Section Title (Vote.php) */
.admin-section-title { 
    color: var(--color-primary); font-family: var(--font-head); font-size: 0.8rem; 
    font-weight: 700; border-bottom: none; padding-bottom: 0; margin-bottom: 10px; 
    margin-top: 30px; text-transform: uppercase; letter-spacing: 1px; 
}
.admin-section-title.warning { color: var(--color-warning); }

/* =========================================
   3. FORMS & INPUTS
   ========================================= */
.form-control {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important; border-radius: 4px !important;
    font-size: 1.1rem !important; padding: 4px 6px 4px 12px !important;
    height: auto !important;
}
.form-control:focus {
    border-color: var(--color-primary) !important; 
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
    background-color: rgba(0, 0, 0, 0.7) !important; outline: none !important;
}
.form-control::placeholder { color: rgba(255, 255, 255, 0.7) !important; opacity: 1; font-size: 0.9em; font-style: italic; }
.form-control:focus::placeholder { opacity: 0.2; }

/* Dátum/Idő Placeholder Fix */
input[type="date"].form-control:not(:focus):not(.is-filled),
input[type="time"].form-control:not(:focus):not(.is-filled),
input[type="datetime-local"].form-control:not(:focus):not(.is-filled) {
    color: rgba(255, 255, 255, 0.5) !important;
}
input[type="date"].form-control:focus, input[type="date"].form-control.is-filled,
input[type="time"].form-control:focus, input[type="time"].form-control.is-filled {
    color: #fff !important;
}
.form-control::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 0.6; }
.form-control::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Form Switch (Toggle) */
.form-switch { padding-left: 3.5em !important; }
.form-switch .form-check-input {
    width: 40px !important; height: 20px !important;
    border-radius: 20px !important; background-color: transparent !important;
    border: 1px solid var(--color-primary) !important; margin-left: -3.5em !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2300f3ff'/%3e%3c/svg%3e") !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--color-primary) !important; box-shadow: 0 0 10px var(--color-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
}

/* Checkbox */
.cyber-checkbox, .form-check-input { 
    appearance: none; -webkit-appearance: none; width: 18px; height: 18px; 
    border: 1px solid var(--color-primary); border-radius: 4px; background-color: transparent; 
    cursor: pointer; transition: all 0.2s; 
}
.cyber-checkbox:checked, .form-check-input:checked { 
    background-color: var(--color-primary); box-shadow: 0 0 10px var(--color-primary); 
    border-color: var(--color-primary); 
}

/* Admin Input specifikus méretek */
.admin-form .existing-item input.form-control,
.admin-form .new-item-row input.form-control {
    font-size: 1.15rem !important; height: 45px !important;
    padding: 8px 12px !important; font-weight: 500 !important;
    display: flex !important; align-items: center !important;
}
.admin-form input[type="date"].form-control,
.admin-form input[type="time"].form-control { padding-top: 10px !important; }

.existing-item { margin-bottom: 5px !important; padding-bottom: 2px; }

/* =========================================
   4. BUTTONS
   ========================================= */

/* EGYEDI LOGOUT GOMB (Önálló, Tiszta Piros) */
.btn-logout-custom {
    /* 1. Alapok (Mivel kivettük a btn-copy-link-et, ezeket pótolni kell) */
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 2. Stílus (Piros) */
    text-decoration: none !important;
    background-color: var(--color-danger) !important; 
    border: 1px solid var(--color-danger) !important;
    color: #ffffff !important;
    
    /* 3. Méret */
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.3s ease;
    
    /* 4. Árnyék (Ha nem akarod, hogy villogjon, ezt vedd ki!) */
    /* box-shadow: 0 0 5px rgba(220, 53, 69, 0.4); */
}

/* Hover: Csak sötétedik, SEMMI KÉK! */
.btn-logout-custom:hover {
    background-color: #b02a37 !important; /* Sötétebb vörös */
    color: #ffffff !important;
    border-color: #b02a37 !important;
    /* box-shadow: none !important;  <-- Ha biztosra akarsz menni, hogy ne legyen fény */
}
   
/* Alap Cyber Gomb */
.btn-cyber { 
    background: linear-gradient(90deg, transparent, var(--color-primary-dim), transparent); 
    border: 1px solid var(--color-primary); color: var(--color-primary); 
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s; 
}
.btn-cyber:hover { background: var(--color-primary); color: var(--text-dark); box-shadow: 0 0 20px var(--color-primary); }

/* Új Küldetés Gomb */
.btn-new-mission { 
    position: absolute; left: 0; top: 1.5rem; transform: translateY(-50%); 
    background: rgba(0,0,0,0.4); border: 1px solid var(--border-color-dim); color: var(--text-muted); 
    font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; 
    padding: 10px 20px; border-radius: 10px; text-decoration: none; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 0 15px rgba(0,0,0,0.3); letter-spacing: 1px; 
}
.btn-new-mission:hover { 
    border-color: var(--color-primary); background: var(--color-primary-dim); 
    color: var(--color-primary); text-shadow: 0 0 10px var(--color-primary); 
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.4); 
}

/* Copy / Link Gombok */
.btn-copy-link { 
    background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); 
    font-family: var(--font-head); font-size: 0.875rem; padding: 0.25rem 0.5rem; 
    border-radius: 0.25rem; transition: all 0.3s ease; 
}
.btn-copy-link:hover { background: var(--color-primary); color: var(--bg-body); box-shadow: 0 0 10px var(--color-primary); }

.btn-copy-red { border-color: var(--color-danger) !important; color: var(--color-danger) !important; }
.btn-copy-red:hover { background-color: var(--color-danger) !important; color: #fff !important; box-shadow: 0 0 10px var(--color-danger) !important; }

.btn-copy-orange { border-color: #ff712b !important; color: #ff712b !important; }
.btn-copy-orange:hover { background-color: #ff5500 !important; color: #fff !important; box-shadow: 0 0 15px #ff5500 !important; text-shadow: 0 0 5px rgba(0,0,0,0.5); }

/* Sor Törlés (Admin) */
.btn-delete-row {
    background: transparent !important; border: 1px solid var(--color-danger) !important; 
    color: var(--color-danger) !important; font-family: var(--font-head) !important; 
    font-size: 0.8rem !important; font-weight: 500 !important; text-transform: uppercase; 
    letter-spacing: 1px !important; padding: 3px 10px !important; border-radius: 4px; transition: all 0.3s;
}
.btn-delete-row:hover { color: #fff !important; background-color: var(--color-danger) !important; box-shadow: 0 0 10px rgba(220, 53, 69, 0.6); }

/* Felhasználói Szavazat Törlés (X) */
.btn-delete-vote { 
    background: transparent; border: 1px solid var(--color-danger-dim); color: var(--color-danger); 
    cursor: pointer; font-size: 0.8rem; padding: 0 6px; margin-right: 10px; border-radius: 4px; 
    opacity: 0.6; transition: 0.3s; font-family: var(--font-head); 
}
.btn-delete-vote:hover { opacity: 1; background: var(--color-danger-dim); box-shadow: 0 0 10px var(--color-danger); border-color: var(--color-danger); }

/* Decline / Nem tudok menni gomb */
.btn-decline {
    color: #dc3545 !important; border: 1px solid #dc3545 !important; background: transparent !important;
    font-family: var(--font-body); font-weight: 700 !important; letter-spacing: 1px !important;
    text-transform: uppercase; font-size: 0.85rem !important; padding: 8px 20px !important;
    height: auto !important; margin-top: 15px !important; transition: all 0.3s;
}
.btn-decline:hover { background-color: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }

/* Rendszer gombok (Logout, Stealth, Modal, Warning) */
.btn-tech-logout { 
    background: rgba(0,0,0,0.4); border: 1px solid #444; color: #888; 
    font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; padding: 10px 20px; 
    border-radius: 10px; text-decoration: none; display: inline-block; transition: all 0.3s; 
    box-shadow: 0 0 15px rgba(0,0,0,0.3); letter-spacing: 1px; 
}
.btn-tech-logout:hover { border-color: #ff5555; background: rgba(255, 85, 85, 0.15); color: #ff5555; text-shadow: 0 0 10px #ff5555; box-shadow: 0 0 25px rgba(255, 85, 85, 0.4); }

.btn-stealth { 
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255, 255, 255, 0.2); 
    color: rgba(255, 255, 255, 0.6); font-family: var(--font-body); font-size: 0.8rem; 
    letter-spacing: 2px; text-transform: uppercase; padding: 8px 20px; border-radius: 5px; transition: all 0.3s; 
}
.btn-stealth:hover { border-color: var(--color-danger); color: var(--color-danger); background: var(--color-danger-dim); box-shadow: 0 0 15px rgba(255, 85, 85, 0.3); }

.btn-tech-modal { 
    background: rgba(0,0,0,0.4); border: 1px solid var(--border-color-dim); color: #ccc; 
    font-family: var(--font-head); padding: 8px 20px; border-radius: 10px; transition: all 0.3s; 
    text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; 
}
.btn-tech-modal:hover { background: var(--bg-hover); color: var(--text-main); border-color: var(--text-main); }
.btn-tech-modal-red { border-color: var(--color-danger); color: var(--color-danger); }
.btn-tech-modal-red:hover { background: rgba(255, 0, 0, 0.2); box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); text-shadow: 0 0 10px var(--color-danger); color: var(--color-danger); }
.btn-tech-modal-yellow { border-color: var(--color-warning); color: var(--color-warning); }
.btn-tech-modal-yellow:hover { background: rgba(255, 204, 0, 0.2); box-shadow: 0 0 20px rgba(255, 204, 0, 0.5); text-shadow: 0 0 10px var(--color-warning); color: var(--color-warning); }

.btn-outline-cyber-warning { color: var(--color-warning); border-color: var(--color-warning); }
.btn-outline-cyber-warning:hover { background-color: var(--color-warning); color: #000; }

.btn-confirm { 
    background: var(--color-primary-dim); border: 1px solid var(--color-primary); color: var(--color-primary); 
    transition: all 0.3s; font-family: var(--font-head); text-decoration: none; 
    display: block; padding: .5rem 1rem; font-size: 1.25rem; border-radius: .3rem;
}
.btn-confirm:hover { background: var(--color-primary); color: var(--text-dark); box-shadow: 0 0 15px var(--color-primary); }

/* =========================================
   5. VOTING INTERFACE SPECIFICS
   ========================================= */
/* Codename Input */
#voteForm label.text-neon { font-size: 0.95rem !important; letter-spacing: 1px; font-weight: 700; margin-bottom: 5px !important; }
#inpNev { font-size: 1.2rem !important; padding: 10px 12px !important; height: auto !important; font-weight: 500 !important; border-width: 1px !important; }

/* Voting Options */
.vote-option { 
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255,255,255,0.1); 
    transition: all 0.3s; cursor: pointer; padding: 12px 15px !important; 
}
.vote-option:hover { background: var(--color-primary-dim); border-color: var(--color-primary); }
.vote-option.selected { 
    border: 1px solid var(--color-accent) !important; background: var(--color-accent-dim) !important; 
    box-shadow: inset 0 0 15px rgba(188, 19, 254, 0.2); 
}
.vote-option label.form-check-label { font-size: 1.25rem !important; line-height: 1.3; padding-top: 2px; }
.vote-option .form-check-input { width: 22px !important; height: 22px !important; margin-right: 15px !important; margin-top: 0.1em !important; }
.selected-label { font-family: var(--font-head); color: var(--color-accent); font-size: 0.8em; }

/* Winner Box */
.winner-box { 
    background: var(--color-accent-dim); border: 1px solid var(--color-accent); 
    box-shadow: 0 0 30px rgba(188, 19, 254, 0.2); animation: pulse 3s infinite; 
}
.nyertes-date { 
    color: var(--text-main); text-shadow: 0 0 10px var(--color-accent); 
    font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 5px; 
}
.nyertes-day { color: var(--text-main); font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.9; }

/* A VOTE.PHP alján lévő gomb középre igazítása */
.footer-admin-container { 
    margin-top: 30px; 
    text-align: center; 
}

/* A "SECRET BALLOT" alatti szöveg láthatóságának javítása */
.border-warning .text-muted { color: rgba(255, 255, 255, 0.6) !important; }

/* Vote Log Table (Minimal Glass) */
.vote-log-table { --bs-table-bg: transparent; --bs-table-accent-bg: transparent; border: none !important; }
.vote-log-table thead th { 
    vertical-align: bottom !important; background-color: transparent !important; color: var(--color-primary); 
    border-bottom: 1px solid var(--color-primary) !important; border-top: none !important; 
    font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; letter-spacing: 1px; 
    padding: 15px 10px 8px 10px; box-shadow: none !important; 
}
.vote-log-table thead tr.header-multiline th { vertical-align: top !important; }
.vote-log-table thead th.codename-cell { color: var(--text-main); }
.vote-log-table thead th.option-cell { font-size: 0.75rem !important; padding-left: 4px !important; padding-right: 4px !important; letter-spacing: 0.5px; }

.vote-log-table tbody td { 
    background-color: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
    color: #ccc; padding: 12px 10px; vertical-align: middle; 
}
.vote-log-table tbody tr:hover td { background-color: rgba(255, 255, 255, 0.03) !important; color: #fff; }

.vote-log-table .total-row td { 
    border-top: 2px solid var(--color-primary) !important; color: var(--color-primary) !important; 
    font-weight: 900; text-transform: uppercase; font-size: 1rem; text-shadow: 0 0 5px rgba(0, 243, 255, 0.5); 
}

/* Kiemelt saját sor */
.vote-log-table .my-row-highlight td { color: var(--color-primary) !important; font-weight: bold; background: transparent !important; }
.vote-log-table .my-row-highlight td:first-child { position: relative; font-size: 1.1rem !important; }
.vote-log-table .my-row-highlight td:first-child::before { 
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; 
    background-color: var(--color-primary); box-shadow: 0 0 8px var(--color-primary); 
}

/* Date cell formatting */
.date-cell-wrapper { line-height: 1.2; font-size: 0.9rem; color: var(--text-main); }
.date-cell-sub { color: var(--color-primary); font-size: 0.85em; display: block; margin-top: 2px; min-height: 1.2em; }
.date-cell-sub.date-cell-notset { color: rgba(255, 255, 255, 0.4); font-style: italic; font-size: 0.75em; }

.neon-tick { color: var(--color-primary); font-size: 1.3rem; text-shadow: 0 0 10px var(--color-primary); font-weight: bold; }
.neon-cross { color: var(--color-danger); font-size: 1.3rem; text-shadow: 0 0 10px var(--color-danger); font-weight: bold; }
.time-badge { background: #333; padding: 1px 5px; border-radius: 4px; border:1px solid #555; font-size:0.5em; vertical-align: middle; color: #fff; }

/* =========================================
   6. ALERTS & MODALS
   ========================================= */
/* Lebegő értesítések (HUD) */
.cyber-alert { 
    position: fixed; top: var(--ui-top-offset); left: 50%; transform: translateX(-50%); z-index: 10000; 
    width: 90%; max-width: 600px; background: #050a14; border: none !important; 
    border-left: 4px solid !important; padding: 15px 20px; font-family: var(--font-head); 
    font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; text-align: left !important; 
    animation: slideInDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.cyber-alert.success { border-left-color: var(--color-primary) !important; color: var(--color-primary); box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 25px rgba(0, 243, 255, 0.4); }
.cyber-alert.danger { border-left-color: var(--color-danger) !important; color: var(--color-danger); box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 25px rgba(255, 85, 85, 0.4); }
.cyber-alert.warning { border-left-color: var(--color-warning) !important; color: var(--color-warning); box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 25px rgba(255, 204, 0, 0.4); }

/* Hibás input jelölés */
.error-highlight { border: 1px solid #ff5555 !important; background: rgba(255, 85, 85, 0.15) !important; border-radius: 5px !important; }
.red-alert-active { animation: redFlash 0.5s ease-in-out infinite alternate !important; border-width: 1px !important; border-style: solid !important; }

/* Modals */
.glass-modal-danger .modal-content { background: rgba(10, 10, 15, 0.95) !important; backdrop-filter: blur(15px); border: 1px solid var(--color-danger-pure) !important; box-shadow: 0 0 50px rgba(255, 0, 0, 0.4) !important; border-radius: 10px !important; color: var(--text-main); }
.glass-modal-danger .modal-header { border-bottom: 1px solid rgba(255, 0, 0, 0.3); }
.glass-modal-danger .modal-title { color: var(--color-danger-pure); text-shadow: 0 0 10px var(--color-danger-pure); font-family: var(--font-head); margin: 0 auto; }

.glass-modal-warning .modal-content { background: rgba(10, 10, 15, 0.95) !important; backdrop-filter: blur(15px); border: 1px solid var(--color-warning) !important; box-shadow: 0 0 50px rgba(255, 204, 0, 0.4) !important; border-radius: 10px !important; color: var(--text-main); }
.glass-modal-warning .modal-header { border-bottom: 1px solid rgba(255, 204, 0, 0.3); }
.glass-modal-warning .modal-title { color: var(--color-warning); text-shadow: 0 0 10px var(--color-warning); font-family: var(--font-head); margin: 0 auto; }

/* Create Mission Modal Elements */
.key-display { background: rgba(0,0,0,0.5); border: 1px solid var(--color-primary); color: var(--color-primary); font-family: var(--font-head); font-size: 1.2rem; padding: 10px; margin: 10px 0; text-align: center; letter-spacing: 2px; user-select: text; }
.warning-text { color: var(--color-warning); font-size: 0.85rem; margin-bottom: 20px; border-left: 2px solid var(--color-warning); padding-left: 10px; text-align: left; position: relative; min-height: 50px; display: flex; align-items: center; }
.warning-text .original-message, .warning-text .copied-message { width: 100%; transition: opacity 0.3s ease; position: absolute; }
.warning-text .copied-message { opacity: 0; color: var(--color-success); font-weight: 900; font-size: 1rem; text-align: center; padding-right: 10px; }
.warning-text.copied .original-message { opacity: 0; }
.warning-text.copied .copied-message { opacity: 1; }
.warning-text.copied { border-left-color: var(--color-success); }

/* =========================================
   7. INDEX PAGE SPECIFICS
   ========================================= */

/* --- A FŐ PANEL ALAPJAI (Méretfüggetlen!) --- */
#mainGlassPanel {
    width: 100%;
    margin: 0 auto;    
}

/* 1. Kompakt nézet (Index oldalra - Kártya stílus) */
.layout-compact {
    max-width: 500px;
}

/* 2. Széles nézet (Vote oldalra - Táblázat stílus) */
.layout-wide {
    max-width: 100%; /* Itt fér el kényelmesen a táblázat */
}


/* 1. Input Mezők Konténere (mb-3 helyett) */
.index-input-group {
    margin-bottom: 0.1rem; /* PC-n */
    width: 100%;
    position: relative;
}

/* 2. Címkék (MISSION OBJECTIVE...) */
.index-label {
    display: block;
    color: var(--color-primary);
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    
}
.index-label.centered { text-align: center; margin-bottom: 1.5rem; font-size: 0.7rem; }

/* 3. Input Mezők */
.index-input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 12px 15px;
    border-radius: 5px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}
.index-input:focus {
    border-color: var(--color-primary);
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2), inset 0 0 5px rgba(0,0,0,0.8);
}
.index-input::placeholder { color: rgba(255, 255, 255, 0.616); font-size: 0.9em; font-style: italic; }

/* 4. Egyéb elrendezés (A maradék Bootstrap mb-k helyett) */
.index-header-spacer { 
    margin-bottom: 2rem; /* A mb-4 helyett */
    text-align: center; 
} 

.index-footer-notice {
    text-align: center;
    margin-bottom: 2rem; /* A mb-3 helyett */
    font-size: 0.8rem;   /* A small helyett */
    color: rgba(255, 255, 255, 0.6); /* A text-secondary + opacity helyett */
    letter-spacing: 1px;
}
.index-footer-notice .highlight { color: var(--color-accent); text-shadow: 0 0 5px var(--color-accent); }


.icon-selection-label { 
    cursor: pointer; transition: all 0.3s ease; opacity: 0.5; border: 1px solid transparent; 
    padding: 20px; border-radius: 15px; width: 100%; min-height: 220px; display: flex; 
    flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; 
}
.mission-icon { width: 120px; height: 120px; object-fit: contain; margin-bottom: 15px; transition: all 0.4s; filter: grayscale(100%); }
.mission-label-text { font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5); transition: all 0.3s ease; text-align: center; }

.icon-selection-label:hover { opacity: 1; }
.icon-selection-label:hover .mission-icon { transform: scale(1.1); filter: grayscale(0%); }

.btn-check:checked + .icon-selection-label { opacity: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.btn-check:checked + .icon-selection-label .mission-icon { transform: scale(1.15); filter: grayscale(0%); }

.icon-selection-label:hover .icon-date, .btn-check:checked + .icon-selection-label .icon-date { filter: grayscale(0%) drop-shadow(0 0 15px var(--color-primary)); }
.btn-check:checked + .icon-selection-label .text-date { color: var(--color-primary); text-shadow: 0 0 15px var(--color-primary); }

.icon-selection-label:hover .icon-other, .btn-check:checked + .icon-selection-label .icon-other { filter: grayscale(0%) drop-shadow(0 0 15px var(--color-tertiary)); }
.btn-check:checked + .icon-selection-label .text-other { color: var(--color-tertiary); text-shadow: 0 0 15px var(--color-tertiary); }

/* =========================================
   INDEX MODAL (SUCCESS POPUP) - CUSTOM STYLES
   ========================================= */

/* 1. A KERET (A régi modal-content helyett) */
.index-modal-content {
    background: rgba(5, 10, 20, 0.95) !important; /* Sötét, majdnem teli háttér */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid var(--color-primary) !important; /* A kék keret */
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.3);       /* A kék ragyogás */
    border-radius: 15px !important;
    overflow: hidden;
}

/* 2. FEJLÉC (/// MISSION ESTABLISHED ///) */
.index-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Halvány elválasztó */
    padding: 15px;
    text-align: center;
    background: rgba(0, 243, 255, 0.05); /* Pici kék háttér a fejlécnek */
}

.index-modal-title {
    color: var(--color-primary);
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.502);
}

/* 3. TEST (A tartalom) */
.index-modal-body {
    padding: 2rem;
    text-align: center;
    color: #ffffff;
}

.index-modal-subtitle {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: #ffcc00;
}

/* 4. FIGYELMEZTETŐ DOBOZ (JAVÍTOTT IGAZÍTÁS ÉS TÉRKÖZ) */
.index-warning-box {
    color: var(--color-warning);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    margin-bottom: 20px;
    
    /* Bal oldali vastag sárga vonal */
    border-left: 3px solid var(--color-warning); 
    
    position: relative; 
    min-height: 50px;
    background: transparent;
    padding: 0; 
}

/* KÖZÖS ALAPOK */
.index-warning-box .original-message, 
.index-warning-box .copied-message,
.index-warning-box .abort-message { 
    width: 100%; 
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0;
    
    display: flex;
    align-items: center; /* Függőlegesen középre */
    transition: opacity 0.3s ease; 
    box-sizing: border-box;
}

/* 1. EREDETI ÜZENET (Balra igazítva + Padding) */
.index-warning-box .original-message {
    justify-content: flex-start;  /* Flexbox elemek balra */
    text-align: left !important;  /* Szöveg balra kényszerítve! */
    padding-left: 15px;           /* Távolság a sárga vonaltól */
    padding-right: 5px;
    line-height: 1.2;             /* Hogy ne csússzon szét a több sor */
}

/* 2. MÁSOLVA ÜZENET (Zöld - Középen) */
.index-warning-box .copied-message { 
    opacity: 0; 
    color: var(--color-success); 
    font-weight: 900; 
    font-size: 1rem; 
    justify-content: center; /* Vízszintesen középre */
    padding: 0;
}

/* 3. MEGSZAKÍTÁS ÜZENET (Piros - Középen) */
.index-warning-box .abort-message { 
    opacity: 0; 
    color: var(--color-danger); 
    font-weight: 900; 
    font-size: 0.9rem; 
    text-transform: uppercase;
    justify-content: center; /* Vízszintesen középre */
    padding: 0;
}

/* --- ÁLLAPOTOK KEZELÉSE --- */
.index-warning-box.copied .original-message { opacity: 0; }
.index-warning-box.copied .copied-message { opacity: 1; }
.index-warning-box.copied { border-left-color: var(--color-success); }

.index-warning-box.aborted .original-message { opacity: 0; }
.index-warning-box.aborted .copied-message { opacity: 0; }
.index-warning-box.aborted .abort-message { opacity: 1; }
.index-warning-box.aborted { border-left-color: var(--color-danger); }


/* 5. KULCS KIJELZŐ (Admin Access Key) */
.index-key-label {
    display: block;
    font-size: 0.9rem;
    color: #00f2ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.index-key-display {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    padding: 12px 15px;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 5px;
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.2);
    
    cursor: pointer; /* Kattintható */
    transition: all 0.3s;
    user-select: none; /* Hogy ne jelölje ki a szöveget, csak másolja */
}

.index-key-display:hover {
    background: rgba(0, 243, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
}

/* A kis "COPY" felirat a dobozon belül */
.key-copy-badge {
    font-size: 0.6rem;
    background: rgba(0, 243, 255, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-primary);
    margin-left: 10px;
    white-space: nowrap;
}

/* 6. GOMBOK CSOPORTJA */
.index-modal-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Az alsó sor: 1/3 ABORT - 2/3 PROCEED */
.modal-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Az arány: 1 egység vs 2 egység */
    gap: 8px;
    margin-top: 8px;
}

/* Gombok finomhangolása a rácsban */
#btnCancelAction, #btnProceedAction {
    margin: 0 !important; /* A grid intézi a térközöket */
    height: 100%;        /* Egyforma magasak legyenek */
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A sárga gomb alatti távtartó/felirat helye */
.download-info-spacer {
    height: 25px; /* Ez a "levegő" mérete */
    width: 100%;
    
    /* Ha később írsz bele szöveget, az így fog kinézni: */
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   SPECIÁLIS COPY GOMB (KÉK - MÁSODLAGOS)
   ========================================= */
.btn-index-copy {
    align-self: center !important; 
    
    background: transparent;
    border: 1px solid var(--color-primary); /* Kék keret */
    color: var(--color-primary);            /* Kék szöveg */
    
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 20px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.2s;
    min-width: 140px;
    margin-bottom: 5px;
}

.btn-index-copy:hover {
    background: var(--color-primary) !important; /* Teli kék háttér */
    color: #000000 !important;                   /* Fekete szöveg */
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.4); /* Enyhe kék ragyogás */
    cursor: pointer;
}

/* =========================================
   SPECIÁLIS DOWNLOAD (SÁRGA)
   ========================================= */
.btn-index-download {
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.1), transparent); 
    border: 1px solid var(--color-warning); 
    color: var(--color-warning); 
    font-family: var(--font-head); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    transition: all 0.3s;
    padding: 12px;
    width: 100%;
    font-weight: 700;
}
.btn-index-download:hover {
    background: var(--color-warning); 
    color: #000; /* Fekete szöveg a sárga alapon */
    box-shadow: 0 0 20px var(--color-warning);
}

/* =========================================
   SPECIÁLIS CANCEL GOMB (PIROS - ABORT)
   ========================================= */
.btn-index-cancel {
    background: transparent;
    border: 1px solid var(--color-danger); /* Piros keret */
    color: var(--color-danger);            /* Piros szöveg */
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 12px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.2s;
    width: 100%;
    margin-top: 5px; /* Pici hely a Proceed gomb alatt */
}

.btn-index-cancel:hover {
    background: rgb(220, 53, 70); /* Halvány piros háttér */
    box-shadow: 0 0 10px var(--color-danger);
    cursor: pointer;
    color: #fff;
}

.btn-index-cancel.confirm-state {
    background-color: var(--color-danger);
    color: white;
    font-weight: 900;
    box-shadow: 0 0 15px var(--color-danger);
    border-color: var(--color-danger);
}

/* =========================================
   MOBIL NÉZET - INDEX MODAL
   ========================================= */
@media screen and (max-width: 991px) {
    .index-modal-body {
        padding: 1.2rem !important; /* Kevesebb padding mobilon */
    }
    .index-modal-title {
        font-size: 1rem !important; /* Kisebb cím */
    }
    .index-modal-subtitle {
        font-size: 1rem !important;
        margin-bottom: 0.3rem;
    }
    .index-warning-box {
        font-size: 0.85rem !important; /* Kisebb figyelmeztetés */
        padding-left: 10px !important;
    }
    .index-key-display {
        font-size: 1rem !important; /* Mobilon kisebb kulcs, hogy kiférjen */
        padding: 10px !important;
        letter-spacing: 1px !important;
    }
    .btn-index-copy {
        font-size: 0.8rem;
        padding: 5px 15px;
        min-width: 120px;
    }
}


/* =========================================
   8. TIMERS & MAINTENANCE
   ========================================= */
.countdown-container { 
    background: rgba(0, 0, 0, 0.6); border: 1px dashed var(--color-primary); 
    border-radius: 8px; padding: 15px; margin-top: 20px; text-align: center; 
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1); 
}
.countdown-label { font-family: var(--font-body); font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); letter-spacing: 2px; margin-bottom: 5px; text-transform: uppercase; }
.countdown-timer { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--text-main); text-shadow: 0 0 10px var(--color-primary); letter-spacing: 3px; }

.voting-closed-overlay { 
    text-align: center; padding: 30px; border: 2px solid var(--color-danger); 
    background: rgba(20, 0, 0, 0.8); color: var(--color-danger); font-family: var(--font-head); 
    font-weight: 900; font-size: 1.5rem; letter-spacing: 2px; box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.3); 
}
.voting-pending-overlay { 
    text-align: center; padding: 30px; border: 2px dashed var(--color-warning); 
    background: rgba(20, 15, 0, 0.8); color: var(--color-warning); font-family: var(--font-head); 
    font-weight: 900; font-size: 1.5rem; letter-spacing: 2px; box-shadow: inset 0 0 30px rgba(255, 204, 0, 0.2); 
    animation: pending-pulse 3s infinite; 
}

/* Animations */
@keyframes slideInDown { from { top: -100px; opacity: 0; } to { top: var(--ui-top-offset); opacity: 1; } }
@keyframes redFlash { from { box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); border-color: rgba(255, 0, 0, 0.6); } to { box-shadow: 0 0 60px rgba(255, 0, 0, 1); border-color: #ff0000; } }
@keyframes pulse { 0% { box-shadow: 0 0 15px rgba(188, 19, 254, 0.2); } 50% { box-shadow: 0 0 30px rgba(188, 19, 254, 0.5); } 100% { box-shadow: 0 0 15px rgba(188, 19, 254, 0.2); } }
@keyframes pending-pulse { 0% { box-shadow: inset 0 0 10px rgba(255, 204, 0, 0.1); border-color: rgba(255, 204, 0, 0.5); } 50% { box-shadow: inset 0 0 30px rgba(255, 204, 0, 0.4); border-color: rgba(255, 204, 0, 1); } 100% { box-shadow: inset 0 0 10px rgba(255, 204, 0, 0.1); border-color: rgba(255, 204, 0, 0.5); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.new-item-row { animation: fadeIn 0.3s ease; border-left: 3px solid var(--color-primary); background: var(--color-primary-dim); padding: 10px; margin-bottom: 5px; }
.shake-error { animation: shake 0.5s; }
@keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }


/* =========================================
   LAUNCH PANEL HEADER (KÜLÖN VEZÉRELHETŐ)
   ========================================= */

.main-logo-img {
    max-width: 700px !important; /* 700px-ről visszavettük, notebookon az már sok */
    width: 85% !important;
    
    /* A LÉNYEG: */
    max-height: 140px;      /* Nem engedjük, hogy ennél magasabb legyen! */
    object-fit: contain;    /* Így nem torzul, csak belefér a dobozba */
    
    filter: none !important;
}

/* --- A Főcím (LAUNCH YOUR OWN VOTE) --- */
.panel-launch-title {
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    
    /* A LÉNYEG: Folyékony méretezés */
    /* Minimum: 1.1rem (kicsi mobil) */
    /* Ideális: a képernyő szélességének 5%-a (5vw) */
    /* Maximum: 1.8rem (asztali gép) */
    font-size: clamp(0.6rem, 5vw, 1.6rem);
    
    white-space: nowrap;    /* Nem engedjük tördelni */
    overflow: hidden;       
    text-overflow: ellipsis; 
    
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;            
    border-bottom: 1px solid var(--color-primary); 
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* --- Az Alcím Konténer --- */
.panel-launch-subtitle-box {
    font-family: 'Rajdhani', sans-serif;
    
    /* Ez is változzon a hellyel együtt! */
    /* Minimum: 0.75rem (nagyon kicsi) -> Max: 1rem (normál) */
    font-size: clamp(0.75rem, 3vw, 1rem);
    
    opacity: 1;         
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Kék Szövegrész (READY...) */
.panel-launch-text-blue {
    color: #00f3ff; /* Vagy var(--color-primary) */
}

/* Zöld Szövegrész (NO REG...) */
.panel-launch-text-green {
    color: #39ff14; /* Vagy var(--color-success) */
}

/* Elválasztójel (//) */
.panel-launch-sep {
    color: #ffffff;
    margin: 0 5px; /* Távolság a szövegektől */
    font-weight: bold;
}



/* =========================================
   9. RESPONSIVE
   ========================================= */
@media (max-width: 768px) { 
    .container { padding-left: 15px; padding-right: 15px; } 
    .glass-panel { border-radius: 15px !important; padding: 1.2rem !important; }     
    .vote-option { padding-bottom: 25px !important; }
    .nyertes-date { font-size: 1.5rem; }    
    .admin-row .form-control, .admin-row .btn { font-size: 0.75rem !important; padding: 2px 4px !important; height: 30px !important; }
}

@media (min-width: 769px) { 
    .admin-form .form-control { font-size: 1rem; } 
    .admin-form .btn { font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; } 
    .admin-row .btn { height: 100%; } 
}


/* =========================================
   10. MATRIX GATEKEEPER (OFFLINE MODE)
   ========================================= */
body.offline-mode { 
    background-color: #000; color: #0f0; margin: 0; overflow: hidden; 
    font-family: var(--font-body); height: 100vh; width: 100vw; 
    display: flex; align-items: center; justify-content: center; 
}
#matrixCanvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.gk-container, .gatekeeper-box { 
    text-align: center; position: relative; z-index: 9999; 
    background: rgba(0, 0, 0, 0.9); padding: 40px; border: 1px solid #0f0; 
    box-shadow: 0 0 50px rgba(0, 255, 0, 0.2); border-radius: 10px; backdrop-filter: blur(5px); max-width: 90%; 
}
.gk-title { font-family: var(--font-head); font-size: 3rem; color: #fff; text-shadow: 0 0 10px #fff, 0 0 20px #0f0, 0 0 30px #0f0; margin: 0 0 20px 0; letter-spacing: 3px; font-weight: 900; }
.gk-text { font-size: 1.2rem; color: #0f0; letter-spacing: 2px; text-transform: uppercase; margin: 0; font-weight: 500; }
.gk-loader { margin-top: 30px; font-size: 0.8rem; opacity: 0.7; letter-spacing: 1px; animation: blink 1s infinite; }
.btn-refresh { margin-top: 20px; background: transparent; border: 1px solid #0f0; color: #0f0; padding: 10px 20px; font-family: var(--font-head); cursor: pointer; transition: all 0.3s; text-transform: uppercase; font-weight: bold; }
.btn-refresh:hover { background: #0f0; color: #000; box-shadow: 0 0 15px #0f0; }


/* =========================================
   FOOTER & SYSTEM INFO (Saját lábléc)
   ========================================= */
.footer-container {
    margin-top: 1.5rem;  /* Asztali nézet: kényelmes távolság a paneltől */
    text-align: center;
    font-size: 0.75rem;  /* Diszkrét méret */
    color: rgba(255, 255, 255, 0.5); /* Halvány, nem zavaró */
    letter-spacing: 1px;
    width: 100%;
    /* Később ide jöhetnek a linkek stílusai: */
    /* display: flex; gap: 15px; justify-content: center; */
}

.footer-container a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s;
}
.footer-container a:hover {
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}



/* ==========================================================================
   📱 MOBIL NÉZET - CSAK INDEX.PHP (V38 - SCROLL FIX)
   ========================================================================== */
@media screen and (max-width: 991px) {

    /* --- 1. ALAPOK --- */
    body {
        /* FONTOS: Levettük a paddingot 0-ra, hogy ne adódjon hozzá a 100vh-hoz */
        padding: 0 !important; 
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    .container {
        /* A térközt itt adjuk hozzá belül, így nem nyomja szét az oldalt */
        padding: 20px 10px !important; 
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        
        /* FONTOS: Felülírjuk a PHP-ban lévő 100vh-t, hogy mobilon csak akkora legyen, amekkora a tartalom */
        min-height: auto !important; 
    }

    /* --- 2. HEADER (LOGÓ) --- */
    .header-container { 
        margin-bottom: 1.5rem !important; 
        margin-top: 0.5rem !important; 
    }
    
    .main-logo-img {
        max-width: 300px !important; 
        width: 85% !important; 
        filter: none !important;
    }

    /* --- 3. ÚJ PANEL CÍMEK MOBILON --- */
    .panel-launch-title {
        /* font-size: 1.25rem !important; <--- EZT TÖRÖLTÜK, MERT A CLAMP INTEZI */
        /* letter-spacing: 1px !important; <--- EZT IS KIVEHETED, ha az alapban benne van */
        margin-bottom: 5px !important; /* A margó maradhat, ha mobilon kisebb helyet akarsz */
        /* white-space: nowrap !important; <--- EZ IS FELESLEGES, mert az alapban is ez van */
    }

    
    .panel-launch-sep { margin: 0 3px !important; }


    /* --- 4. FŐ PANEL KERET --- */
    #mainGlassPanel {
        padding: 20px !important; 
        width: 100% !important;   
        
        /* FONTOS: Minimális margó alul, hogy ne legyen nagy lyuk */
        margin-bottom: 10px !important; 
        
        border-radius: 15px !important;
    }

    /* --- 5. ŰRLAP MEZŐK --- */
    .form-control-lg, .form-control { font-size: 1rem !important; height: 36px !important; margin-bottom: 5px !important; padding-top: 5px !important; padding-bottom: 5px !important; }
    /* A karakter számlálók margójának nullázása: */
    .text-end { margin-bottom: 0px !important; }
    label.text-neon { font-size: 0.7rem !important; margin-bottom: 2px !important; letter-spacing: 1px; }


    /* --- 6. IKON VÁLASZTÓ --- */
    .row.g-3 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; 
        gap: 8px !important; 
        margin: 0 !important;
    }
    .row.g-3 > .col-6 { width: 100% !important; padding: 0 !important; }

    .icon-selection-label {
        min-height: 175px !important; 
        padding: 5px !important; 
        border-radius: 10px !important;
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important; 
    }

    .mission-icon {
        width: 115px !important; 
        height: 115px !important;
        margin-bottom: 0 !important;
        object-fit: contain !important;
    }

    .mission-label-text {
        font-size: 0.8rem !important; 
        letter-spacing: 1px !important;
        text-align: center !important;
        line-height: 1.2;
        white-space: nowrap; 
        opacity: 1;
        margin: 0 !important;
    }


    /* --- 7. EGYÉB --- */
    #btnExecute { font-size: 1rem !important; padding: 12px !important; margin-top: 10px !important; }
    .mt-4.text-secondary { font-size: 0.6rem !important; opacity: 0.4; margin-top: 1rem !important; }

    /* --- 8. INDEX INPUT (SAJÁT STÍLUS) --- */
    .index-input-group { margin-bottom: 0.1rem; }
    .index-header-spacer { margin-bottom: 1.8rem; }
    .index-input { font-size: 1rem !important; padding: 10px 12px; height: 45px; }
    .index-label { font-size: 0.6rem !important; margin-bottom: 4px; }
    .index-label.centered { text-align: center; margin-bottom: 0.8rem; }
    .index-footer-notice { font-size: 0.7rem !important; margin-bottom: 1rem !important; }
    
    /* --- 9. LÁBLÉC MOBILON --- */
    .footer-container {
        margin-top: 0.5rem !important; 
        margin-bottom: 0px !important; /* Semmi extra hely alatta! */
        font-size: 0.65rem !important;
        padding-bottom: 10px !important; /* Egy pici biztonsági hely a képernyő legvégén */
    }

    /* --- 10. MODAL GOMBOK JAVÍTÁSA (MOBIL) --- */
    /* A Download és a Proceed gombokat célozzuk meg */
    #btnDownload, 
    #btnProceedAction {
        font-size: 0.75rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #btnCancelAction {
        font-size: 0.75rem !important;
        padding: 0 !important; /* Hogy kiférjen az "ABORT" */
    }
    .index-key-display {
        font-size: 1rem; /* Kisebb kulcs mobilon */
        flex-direction: column; /* Egymás alá kerüljön a kulcs és a copy felirat */
        gap: 5px;
    }
}
/* ==========================================================================
   11. VOTE PAGE MOBILE SPECIFICS (ADMIN & LAYOUT FIX)
   ========================================================================== */
@media screen and (max-width: 991px) {

    /* --- A) ADMIN KONZOL ÁTRENDEZÉS --- */
    
    /* 1. Fő konténer */
    #adminGlassPanel .admin-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin-bottom: 20px !important;
        padding-bottom: 0 !important;
        border-bottom: none !important; 
    }

    /* 2. FELSŐ SOR: Cím (Balra) és Logout (Jobbra) */
    .admin-title-group {
        width: 100%;
        display: flex !important;
        flex-direction: row !important;      
        justify-content: space-between !important; 
        align-items: center !important;
        
        /* VONAL 1: A Cím/Logout alatt */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 15px;
        margin-bottom: 15px; 
    }

    /* Cím mérete */
    #adminGlassPanel h5 {
        font-size: 1rem !important;
        margin: 0 !important;
        white-space: nowrap;
    }
    
    /* LOGOUT GOMB MOBILON (EXTRA KICSI) */
    .btn-logout-custom {
        white-space: nowrap;
        font-size: 0.65rem !important; /* Kisebb betű */
        padding: 3px 8px !important;   /* Kisebb gomb */
        height: auto !important;
    }

    /* 3. ALSÓ SOR: Műveleti gombok (Grid) */
    .admin-btn-group {
        width: 100%;
        display: grid !important;      
        grid-template-columns: 1fr 1fr; /* Két oszlop */
        gap: 10px !important;

        /* VONAL 2: A Gombok alatt */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 15px; 
        margin-bottom: 0;
    }

    /* COPY LINK: 1. sor, teljes szélesség */
    #copyLinkBtn {
        grid-column: 1 / -1; 
        width: 100%;
        text-align: center;
        padding: 12px !important;
        font-weight: 700;
        font-size: 0.9rem !important;
    }

    /* QR és DELETE gombok */
    #adminGlassPanel .admin-btn-group form, 
    #adminGlassPanel .admin-btn-group form button,
    #adminGlassPanel .btn-copy-red {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    /* --- MOBIL PRINT DOBOZ --- */
    .mobile-print-box {
        background: rgba(255, 255, 255, 0.03);
        padding: 10px;
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .print-label {
        font-family: 'Orbitron', sans-serif; font-size: 0.7rem;
        color: rgba(255, 255, 255, 0.5); letter-spacing: 2px;
        margin-bottom: 5px; text-transform: uppercase;
    }
    .mobile-print-box .btn-cyber { padding: 8px 0 !important; font-size: 0.8rem !important; }
}

/* ==========================================================================
   12. VOTE PAGE HEADER & ADMIN FIXES (MOBILE)
   ========================================================================== */

/* --- ÚJ: KÜLÖN KONTÉNER A VOTE OLDALNAK --- */
.vote-header-container {
    text-align: center;
    position: relative;
    margin-bottom: 3rem; 
    margin-top: 20px !important; 
}

/* LOGÓ (Középen, tiszta) */
.vote-header-logo {
    height: 80px; 
    width: auto;  
    object-fit: contain;
    filter: none !important;
    transition: transform 0.3s ease;
    margin-bottom: 1rem; 
}
.transition-scale:hover .vote-header-logo {
    transform: scale(1.05); 
}

/* ==========================================================================
   MOBIL OPTIMALIZÁCIÓ (VOTE OLDAL) - FINAL
   ========================================================================== */
@media screen and (max-width: 991px) {
    
    /* 1. HEADER IGAZÍTÁS */
    .vote-header-logo { height: 55px; margin-bottom: 5px; }
    .vote-header-container { margin-top: 5px !important; margin-bottom: 25px !important; }
    .data-header-label { font-size: 0.6rem; }
    .btn-card-action { padding: 3px 8px; font-size: 0.65rem; }

    /* 2. ELRENDEZÉS: EGYMÁS ALÁ (FLEX) */
    .row.admin-settings-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important; /* Térköz a szekciók között */
        
        /* NULLÁZÁS 1: A sor negatív margójának eltüntetése */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 3. KÜLSŐ OSZLOPOK KISIMÍTÁSA */
    .row.admin-settings-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        
        /* NULLÁZÁS 2: A Bootstrap g-3 padding eltüntetése */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 4. DOBOZ STÍLUS ELTÜNTETÉSE (CSAK MOBILON) */
    .settings-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important; /* Ez adja vissza a teljes szélességet */
        height: auto !important;
    }

    .settings-card-title {
        padding-left: 0 !important;
        border-bottom: 2px solid var(--color-primary-dim) !important;
        margin-bottom: 15px !important;
        font-size: 0.8rem !important;
        color: var(--color-primary);
        opacity: 0.9;
    }

    .settings-card-title-purple {
        padding-left: 0 !important;
        border-bottom: 2px solid var(--color-primary-dim) !important;
        margin-bottom: 15px !important;
        font-size: 0.8rem !important;
        color: var(--color-accent);
        opacity: 0.9;
    }

    .settings-card .form-check {
        padding-left: 3.5em !important;
        margin-bottom: 15px !important;
    }

    /* 5. BELSŐ RÁCS TELJES KISIMÍTÁSA */
    /* Ez biztosítja, hogy a Timeline/Protocols belső mezői is 0-ról induljanak */
    .row.admin-settings-grid .settings-card .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .row.admin-settings-grid .settings-card .row > div[class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    .settings-description {
        font-size: 0.75rem;          /* Mobilon lehet picit kisebb */
        margin-bottom: 12px;         /* Kisebb térköz */
        line-height: 1.2;
    }
    .settings-addnewrow {
        font-size: 0.75rem;          /* Mobilon lehet picit kisebb */
        margin-bottom: 12px;         /* Kisebb térköz */
        line-height: 1.2;
    }

    .row.mb-4 {
        margin-bottom: 20px !important; /* Eredetileg kb 24px */
    }

    /* Biztos távolság az ADD NEW blokk felett mobilon */
    #mobile-spacer-box {
        margin-top: 40px !important;
    }

    /* =========================================
       1 SOROS LISTA NÉZET MOBILON (FLEX)
       ========================================= */
    
    .new-item-row, .existing-item {
        display: flex !important;
        flex-wrap: nowrap !important; /* Nem törhet új sorba! */
        align-items: center !important;
        gap: 2px !important; /* Pici hézag */
        
        padding: 4px 2px !important; /* Minimális padding */
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 0 !important;
        border-radius: 0 !important;
    }

    /* Input mezők stílusa (Keret nélkül, kicsiben) */
    .new-item-row input.form-control,
    .existing-item input.form-control {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        height: auto !important;
        font-family: 'Rajdhani', sans-serif;
        font-weight: 600;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 0 !important;
        
        /* Itt a trükk: Kicsi betű, hogy kiférjen */
        font-size: 0.7rem !important; 
    }
    
    /* Ha fókuszban van (szerkesztéskor), látszódjon */
    .new-item-row input.form-control:focus,
    .existing-item input.form-control:focus {
        background: rgba(0,0,0,0.8) !important;
        outline: 1px solid var(--color-primary);
    }

    /* --- OSZLOPOK SZÉLESSÉGE (Helykiosztás %-ban) --- */
    
    /* Start Date */
    .new-item-row .col-3:nth-child(1), .existing-item .col-3:nth-child(1) {
        flex: 0 0 26% !important; max-width: 26% !important;
    }
    /* Start Time */
    .new-item-row .col-2:nth-child(2), .existing-item .col-2:nth-child(2) {
        flex: 0 0 16% !important; max-width: 16% !important;
    }
    /* End Date */
    .new-item-row .col-3:nth-child(3), .existing-item .col-3:nth-child(3) {
        flex: 0 0 26% !important; max-width: 26% !important;
        opacity: 0.8;
    }
    /* End Time */
    .new-item-row .col-2:nth-child(4), .existing-item .col-2:nth-child(4) {
        flex: 0 0 16% !important; max-width: 16% !important;
        opacity: 0.8;
    }

    /* Delete/Undo Gomb (Maradék hely: kb 16%) */
    .new-item-row .col-2.d-flex, .existing-item .col-2.d-flex {
        flex: 0 0 12% !important; max-width: 12% !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    /* A gomb maga (X) */
    .delete-btn-responsive, .btn-delete-row {
        padding: 0 !important;
        height: 100% !important;
        font-size: 1.2rem !important; /* Nagy X */
        color: var(--color-danger) !important;
        border: none !important;
        background: transparent !important;
        display: flex; align-items: center; justify-content: center;
    }

    /* Hiba jelzése a mobilos listaelemeken */
    .new-item-row.error-highlight,
    .existing-item.error-highlight {
        border: 1px solid var(--color-danger) !important;
        box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.2);
        animation: pulseRed 2s infinite;
    }

    @keyframes pulseRed {
        0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
        50% { box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); }
        100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
    }

    /* Apró remegés effekt a modal hibaüzenetnek */
    @keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
    }
}

/* =========================================
   SETTINGS CARDS (Admin UI Boxes)
   ========================================= */
.settings-card {
    background: rgba(0, 0, 0, 0.322);       /* Sötétebb háttér, hogy kiemelkedjen a panelből */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    height: 100%;                          /* Hogy egyforma magasak legyenek egymás mellett */
    transition: all 0.3s ease;
    position: relative;
}

.settings-card:hover {
    border-color: var(--color-primary-dim);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.settings-card-title {
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: var(--color-primary);           /* Neon kék cím */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;

    /* ÚJ: Flexbox, hogy a gombot jobbra tudjuk tenni */
    display: flex; 
    justify-content: space-between;
    align-items: center;
    min-height: 32px; /* Hogy a gomb ne nyomja szét, ha van */
}

.settings-card-title-purple {
    font-family: var(--font-head);
    font-size: 0.8rem;
    color: var(--color-accent);           /* Neon kék cím */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;

    /* ÚJ: Flexbox, hogy a gombot jobbra tudjuk tenni */
    display: flex; 
    justify-content: space-between;
    align-items: center;
    min-height: 32px; /* Hogy a gomb ne nyomja szét, ha van */
}

/* Kisebb igazítások a kapcsolókhoz ebben a dobozban */
.settings-card .form-check {
    margin-bottom: 12px;
    padding-left: 3.2em; /* Hely a kapcsolónak */
}
.settings-card .form-check-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}
.settings-card .text-muted {
    font-size: 0.75rem !important;
}

.settings-description {
    display: block;
    color: rgba(255, 255, 255, 0.5); /* Szín és áttetszőség */
    font-size: 0.8rem;               /* Méret */
    line-height: 1.3;                /* Sortávolság */
    margin-bottom: 15px;             /* Távolság az alatta lévő mezőtől */
    font-weight: 400;
    letter-spacing: 0.5px;
}

.settings-addnewrow {
    display: block;
    color: rgba(255, 255, 255, 0.5); /* Szín és áttetszőség */
    font-size: 0.8rem;               /* Méret */
    line-height: 1.3;                /* Sortávolság */
    margin-bottom: 15px;             /* Távolság az alatta lévő mezőtől */
    font-weight: 400;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Kicsi gomb a kártya fejlécébe (+ ADD NEW) */
.btn-card-action {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    font-family: var(--font-head);
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
}
.btn-card-action:hover {
    background: var(--color-primary);
    color: #000;
    box-shadow: 0 0 10px var(--color-primary);
}

/* Adat fejlécek a kártyán belül (Start Date, Option Text...) */
.data-header-row {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 5px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.data-header-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Az Existing Data kártya címe legyen más színű (figyelmeztetőbb) */
.title-warning {
    color: var(--color-warning) !important;
}
/* Lila cím stílus */
.title-purple {
    color: var(--color-tertiary) !important;
    font-size: 0.8rem !important; 
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: 1px;    
}

/* =========================================
   CREATOR INPUT IGAZÍTÁS (HIERARCHIA)
   ========================================= */
#creatorInputBox {
    /* Ugyanannyi behúzás, mint amennyi helyet a kapcsoló (toggle) foglal */
    margin-left: 3.5em !important; 
    
    /* Kicsit közelebb húzzuk a kapcsolóhoz, hogy összetartozónak tűnjön */
    margin-top: 5px !important; 
    
    /* Opcionális: Egy kis bal oldali vonal, ami vizuálisan összeköti őket */
    border-left: 2px solid var(--color-primary-dim);
    padding-left: 10px;
}

/* =========================================
   CORE LAYOUT FIX (ROOT CAUSE SOLUTION)
   ========================================= */

input[type="date"],
input[type="time"] {
    /* 1. A SZÉTCSÚSZÁS VALÓDI MEGOLDÁSA: */
    /* Azt mondjuk, hogy a padding és a keret legyen benne a szélességben (ne adódjon hozzá) */
    box-sizing: border-box !important; 
    
    /* A mező pontosan töltse ki a rendelkezésre álló helyet (col-2, col-3), se többet, se kevesebbet */
    width: 100% !important;
    max-width: 100% !important;
    
    /* Az iPad/Safari alapértelmezett margójának nullázása (ez okozza a tolódást) */
    margin: 0 !important;
    
    /* Ez biztosítja, hogy az ikonokhoz legyen viszonyítási pont */
    position: relative;
}

/* --- PC SPECIFIKUS DIZÁJN (IKONOK) --- */
/* Ez csak akkor aktiválódik, ha van egér (PC/Laptop) */
@media (hover: hover) {
    /* Szöveg igazítása, hogy ne folyjon rá az ikonra */
    input[type="date"] { text-align: left; padding-right: 25px !important; }
    input[type="time"] { text-align: center; }

    /* Az ikon pozicionálása és az általad kért animáció */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
        position: absolute;
        right: 5px;               /* Jobb szélhez rögzítve */
        top: 50%;
        transform: translateY(-50%);
        
        filter: invert(1);        /* Fehér szín */
        cursor: pointer;
        opacity: 0.5;             /* Alapból halvány */
        transition: opacity 0.3s; /* Finom áttűnés */
        z-index: 5;
    }

    /* Hover effekt */
    input[type="date"]::-webkit-calendar-picker-indicator:hover,
    input[type="time"]::-webkit-calendar-picker-indicator:hover {
        opacity: 1;               /* Teljesen látható */
    }
}

/* --- MOBIL/TABLET SPECIFIKUS (IPAD) --- */
/* Itt nem nyúlunk a kinézethez, csak eltüntetjük a kis ikont, hogy tiszta legyen */
@media (hover: none) {
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
        display: none !important;
    }
    /* Mobilon a szöveg középen szebb és kezelhetőbb */
    input[type="date"], input[type="time"] { text-align: center; }
}