:root {
    --primary-color: #33FFCE;
    --background-color: #0D1A1A;
    --button-color: #DFFF4F;
    --dark-text: #0d1a1a;
    --error-color: #ff4d4d;
    --strong-glow: 0 0 8px rgba(51, 255, 206, 0.7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--background-color);
    color: var(--primary-color);
    font-family: 'VT323', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.4;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
}

.container { width: 100%; max-width: 450px; padding: 20px; }

/* NOWE: Styl dla logo z pliku PNG */
.header-logo {
    width: 80px; /* Możesz dostosować rozmiar */
    margin-bottom: 20px;
    /* Filtr drop-shadow daje poświatę do kształtu obrazka, idealne dla PNG */
    filter: drop-shadow(var(--strong-glow));
    /* Logo również będzie migotać */
    animation: flicker-effect 5s infinite linear;
}

.main-header h1 {
    font-size: 3rem;
    font-weight: normal;
    margin-bottom: 5px;
    letter-spacing: 2px;
    text-shadow: var(--strong-glow);
    animation: flicker-effect 5s infinite linear;
}

.main-header p, .main-footer p { text-shadow: var(--strong-glow); }
.main-header p { font-size: 1.3rem; margin-bottom: 5px; letter-spacing: 1px; }
.main-header p:last-of-type { margin-bottom: 30px; }

.login-box {
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    padding: 25px 30px;
    text-align: left;
    background-color: #122426;
    box-shadow: var(--strong-glow);
}

.login-header {
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: var(--primary-color);
    text-shadow: 0 0 5px var(--primary-color), 0 0 10px rgba(51, 255, 206, 0.5);
}

.cursor { animation: blink 1s step-end infinite; }

.input-group { margin-bottom: 25px; }
.input-group label { display: block; font-size: 1.2rem; margin-bottom: 5px; text-shadow: var(--strong-glow); }
.input-group input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--primary-color); color: var(--primary-color); font-family: 'VT323', monospace; font-size: 1.2rem; padding: 5px 0; text-shadow: var(--strong-glow); }
.input-group input:focus { outline: none; border-bottom-color: var(--button-color); }
.password-group { position: relative; }
.toggle-password { position: absolute; right: 0; bottom: 8px; cursor: pointer; width: 20px; height: 20px; color: var(--primary-color); filter: drop-shadow(0 0 5px var(--primary-color)); }

.options { display: flex; align-items: center; margin-bottom: 20px; font-size: 1rem; text-shadow: var(--strong-glow); }
#remember-me { appearance: none; -webkit-appearance: none; background-color: transparent; margin: 0; font: inherit; color: currentColor; width: 1.15em; height: 1.15em; border: 0.1em solid currentColor; border-radius: 1px; transform: translateY(-0.075em); display: grid; place-content: center; cursor: pointer; margin-right: 10px; }
#remember-me::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--primary-color); }
#remember-me:checked::before { transform: scale(1); }

.pump-button {
    background-color: var(--button-color);
    color: var(--dark-text);
    border: none;
    padding: 12px;
    width: 100%;
    font-family: 'VT323', monospace;
    font-size: 1.6rem;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 15px;
    border-radius: 8px;
    text-shadow: none;
    transition: all 0.2s ease;
    animation: pulse-button-glow 2.5s infinite ease-in-out;
}
.pump-button:disabled { cursor: not-allowed; animation: none; filter: brightness(0.6); }
.pump-button:hover:not(:disabled), .pump-button:focus:not(:disabled) {
    animation: none;
    background-color: #c9e649;
    box-shadow: 0 0 10px var(--button-color), 0 0 20px var(--button-color);
    outline: none;
}

.status-message { height: 1.2rem; line-height: 1.2rem; margin-bottom: 15px; text-align: center; font-size: 1rem; text-shadow: 0 0 5px var(--primary-color); }
.status-message.error { color: var(--error-color); text-shadow: 0 0 5px var(--error-color); }
.progress-bar-container { display: none; width: 100%; height: 6px; background-color: rgba(51, 255, 206, 0.1); border: 1px solid rgba(51, 255, 206, 0.2); border-radius: 5px; margin-bottom: 15px; }
.progress-bar-inner { width: 0%; height: 100%; background-color: var(--button-color); border-radius: 5px; transition: width 1.5s ease-out; box-shadow: 0 0 5px var(--button-color), 0 0 10px var(--button-color); }

/* ZMIANA: Poprawiony styl linku "Rejestracja" */
.register-link { text-align: center; }
.register-link a {
    color: var(--primary-color); /* Zmiana koloru na główny */
    text-decoration: none; /* Usunięte stałe podkreślenie */
    font-size: 1.2rem;
    text-shadow: var(--strong-glow); /* Dopasowana poświata */
    transition: all 0.3s ease-in-out;
}
.register-link a:hover {
    color: #fff; /* Jaśniejszy kolor po najechaniu */
    text-decoration: underline; /* Podkreślenie pojawia się po najechaniu */
    text-shadow: 0 0 10px var(--primary-color); /* Mocniejszy blask */
}

.main-footer { margin-top: 20px; }

/* SEKCJA Z ANIMACJAMI */
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }
@keyframes flicker-effect { 0%, 100% { opacity: 1; text-shadow: var(--strong-glow); } 49% { opacity: 1; text-shadow: var(--strong-glow); } 50% { opacity: 0.6; text-shadow: none; filter: drop-shadow(0 0 5px rgba(51,255,206,0.5)); } 51% { opacity: 1; text-shadow: var(--strong-glow); } 74% { opacity: 1; text-shadow: var(--strong-glow); } 75% { opacity: 0.8; text-shadow: 0 0 20px rgba(51, 255, 206, 1); filter: drop-shadow(0 0 15px rgba(51,255,206,1)); } 76% { opacity: 1; text-shadow: var(--strong-glow); } }
@keyframes pulse-button-glow { 0%, 100% { box-shadow: 0 0 5px rgba(223, 255, 79, 0.5); } 50% { box-shadow: 0 0 15px rgba(223, 255, 79, 1); } }