mam problem patrz base.html - <!DOCTYPE html>
<html lang="pl" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}CyberVault{% endblock %}</title>
    <!-- Poprawiony URL do Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
    <!-- ZMIANA TUTAJ: Link do nowego pliku CSS -->
    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
</head>
<body>
    <header>
        <div class="container navbar">
            <div class="logo">[CYBER_VAULT]</div>
            <nav>
                <ul>
                    <li><a href="/">Dashboard (Supabase)</a></li>
                    <li><a href="/local">Local Storage (.db)</a></li>
                    {% if user %}
                        <li><a href="/logout">Logout ({{ user.username }})</a></li>
                    {% else %}
                        <li><a href="/login">Login/Register</a></li>
                    {% endif %}
                    <li>
                        <button id="theme-toggle" title="Toggle Theme">
                            <!-- SVG pozostaje bez zmian, 'currentColor' załatwi sprawę -->
                            <svg id="moon-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M21.64,13.1A9.05,9.05,0,1,1,12.59,4,9,9,0,0,1,21.64,13.1Z"></path></svg>
                            <svg id="sun-icon" style="display:none;" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
                        </button>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        {% block content %}{% endblock %}
    </main>

    <script src="{{ url_for('static', path='/js/vault.js') }}"></script>
</body>
</html>, login.html - {% extends "base.html" %}

{% block title %}Authentication | CyberVault{% endblock %}

{% block content %}
<!-- Kontener dla sceny 3D, początkowo w stanie 'initial' -->
<div class="login-scene initial">
    <!-- Element, który będzie się obracał -->
    <div class="login-flipper">

        <!-- Front: Widoczny na początku -->
        <div class="login-prompt">
            <h2>[ AUTHENTICATION REQUIRED ]</h2>
            <p>Scroll Down to Begin</p>
        </div>

        <!-- Tył: Widoczny po obrocie, zawiera formularz -->
        <div class="login-form-container card">
            <div id="login-tab" class="tab active">
                <h2>Login</h2>
                <form action="/login" method="post">
                    <label for="username">Username</label>
                    <input type="text" id="username" name="username" required>

                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" required>

                    <button type="submit" class="btn">Access Terminal</button>
                </form>
                <p style="margin-top: 20px; font-size: 0.9em; color: var(--text-muted);">
                    No account? <a href="#" id="show-register">Register here.</a>
                </p>
            </div>

            <div id="register-tab" class="tab" style="display: none;">
                <h2>Register</h2>
                <form action="/register" method="post">
                    <label for="reg-username">Username</label>
                    <input type="text" id="reg-username" name="username" required>

                    <label for="reg-email">Email</label>
                    <input type="email" id="reg-email" name="email" required>

                    <label for="reg-password">Password</label>
                    <input type="password" id="reg-password" name="password" required>

                    <label for="reg-confirm-password">Confirm Password</label>
                    <input type="password" id="reg-confirm-password" name="confirm_password" required>

                    <button type="submit" class="btn">Create Account</button>
                </form>
                <p style="margin-top: 20px; font-size: 0.9em; color: var(--text-muted);">
                    Already have an account? <a href="#" id="show-login">Login here.</a>
                </p>
            </div>
        </div>

    </div>
</div>

<style>
    .tab {
        width: 100%;
    }

    .tab.active {
        display: block;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // Przełączanie między formularzami
    const showRegisterLink = document.getElementById('show-register');
    const showLoginLink = document.getElementById('show-login');
    const loginTab = document.getElementById('login-tab');
    const registerTab = document.getElementById('register-tab');

    showRegisterLink.addEventListener('click', (e) => {
        e.preventDefault();
        loginTab.style.display = 'none';
        registerTab.style.display = 'block';
    });

    showLoginLink.addEventListener('click', (e) => {
        e.preventDefault();
        registerTab.style.display = 'none';
        loginTab.style.display = 'block';
    });

    // --- CZĘŚĆ 1: PRZEŁĄCZNIK MOTYWU (DARK/LIGHT) ---
    const themeToggle = document.getElementById('theme-toggle');
    const moonIcon = document.getElementById('moon-icon');
    const sunIcon = document.getElementById('sun-icon');

    const applyTheme = (theme) => {
        document.documentElement.setAttribute('data-theme', theme);
        if (theme === 'light') {
            if (moonIcon) moonIcon.style.display = 'none';
            if (sunIcon) sunIcon.style.display = 'block';
        } else {
            if (moonIcon) moonIcon.style.display = 'block';
            if (sunIcon) sunIcon.style.display = 'none';
        }
    };

    const savedTheme = localStorage.getItem('theme') || 'dark';
    applyTheme(savedTheme);

    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            let newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
            applyTheme(newTheme);
            localStorage.setItem('theme', newTheme);
        });
    }

    // --- CZĘŚĆ 3: ANIMACJA 3D NA STRONIE LOGOWANIA ---
    const loginScene = document.querySelector('.login-scene');

    if (loginScene) {
        const triggerAnimation = () => {
            loginScene.classList.remove('initial');
            loginScene.classList.add('active');
        };

        // Użyj Intersection Observer do wykrywania, gdy użytkownik przewinie do elementu
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    triggerAnimation();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        observer.observe(loginScene);
    }
});
</script>
{% endblock %}
, vault.js - document.addEventListener('DOMContentLoaded', () => {
  // --- CZĘŚĆ 1: PRZEŁĄCZNIK MOTYWU (DARK/LIGHT) ---
  const themeToggle = document.getElementById('theme-toggle');
  const moonIcon = document.getElementById('moon-icon');
  const sunIcon = document.getElementById('sun-icon');

  const applyTheme = (theme) => {
    document.documentElement.setAttribute('data-theme', theme);
    if (theme === 'light') {
      if (moonIcon) moonIcon.style.display = 'none';
      if (sunIcon) sunIcon.style.display = 'block';
    } else {
      if (moonIcon) moonIcon.style.display = 'block';
      if (sunIcon) sunIcon.style.display = 'none';
    }
  };

  const savedTheme = localStorage.getItem('theme') || 'dark';
  applyTheme(savedTheme);

  if (themeToggle) {
    themeToggle.addEventListener('click', () => {
      let newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
      applyTheme(newTheme);
      localStorage.setItem('theme', newTheme);
    });
  }

  // --- CZĘŚĆ 2: ODKRYWANIE/UKRYWANIE HASEŁ W TABELI ---
  const passwordDisplayElements = document.querySelectorAll('.password-display');

  passwordDisplayElements.forEach(element => {
    element.addEventListener('click', () => {
      const isRevealed = element.getAttribute('data-revealed') === 'true';
      const actualPassword = element.getAttribute('data-password');

      if (isRevealed) {
        element.textContent = '••••••••••••';
        element.setAttribute('data-revealed', 'false');
        element.style.color = '';
        element.style.textShadow = '';
      } else {
        element.textContent = actualPassword;
        element.setAttribute('data-revealed', 'true');
        element.style.color = 'var(--accent-highlight)';
        element.style.textShadow = '0 0 8px var(--accent-glow)';
      }
    });
  });

  // --- CZĘŚĆ 3: ANIMACJA 3D NA STRONIE LOGOWANIA ---
  const loginScene = document.querySelector('.login-scene');

  if (loginScene) {
    const triggerAnimation = () => {
      loginScene.classList.remove('initial');
      loginScene.classList.add('active');
    };

    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        triggerAnimation();
        observer.unobserve(loginScene);
      }
    }, {
      threshold: 0.5,
    });

    observer.observe(loginScene);
  }
});, style.css /* --- Zmienne Kolorystyczne (Nowa, Mroczna Paleta) --- */
:root {
    --bg-main: #0a0a0a;
    --bg-content: #141414;
    --border-color: #2a2a2a;
    --text-primary: #e0e0e0;
    --text-muted: #666666;
    --accent-glow: rgba(255, 255, 255, 0.1);
    --accent-highlight: #ffffff;
    --transition-speed: 0.4s;
}

[data-theme="light"] {
    --bg-main: #f0f0f0;
    --bg-content: #ffffff;
    --border-color: #dddddd;
    --text-primary: #1a1a1a;
    --text-muted: #888888;
    --accent-glow: rgba(0, 0, 0, 0.1);
    --accent-highlight: #000000;
}

/* --- Podstawowe Style i Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Roboto Mono', 'Courier New', monospace;
    line-height: 1.6;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    overflow-x: hidden;
}

/* --- Animacje --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes glitch {
    0%, 100% { text-shadow: 0.05em 0 0 var(--accent-glow), -0.05em 0 0 var(--accent-glow); }
    25% { text-shadow: 0.05em 0.05em 0 var(--accent-glow), -0.05em -0.05em 0 var(--accent-glow); }
    50% { text-shadow: -0.05em 0 0 var(--accent-glow), 0.05em 0 0 var(--accent-glow); }
    75% { text-shadow: -0.05em -0.05em 0 var(--accent-glow), 0.05em 0.05em 0 var(--accent-glow); }
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* --- Układ i Komponenty --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background: transparent;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 20px var(--accent-glow);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(5px);
    background-color: rgba(10, 10, 10, 0.8);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    animation: glitch 8s infinite alternate-reverse;
}

nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

nav a {
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 20px;
    padding: 5px 10px;
    transition: var(--transition-speed);
    position: relative;
    text-transform: uppercase;
    font-size: 0.9rem;
}

nav a:hover, nav a.active {
    color: var(--text-primary);
    text-shadow: 0 0 8px var(--accent-glow);
}

main {
    animation: fadeIn 1s ease-out;
    padding-top: 40px;
}

h1, h2 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px var(--accent-glow);
    letter-spacing: 2px;
}

.card {
    background-color: var(--bg-content);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 15px var(--accent-glow);
    border-color: #444;
}

/* --- Formularze i Przyciski --- */
input[type="text"], input[type="password"], input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
    outline: none;
    border-color: var(--accent-highlight);
    box-shadow: 0 0 10px var(--accent-glow);
}

.btn {
    padding: 12px 25px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    background: transparent;
    color: var(--text-muted);
    margin-right: 10px;
}

.btn:hover {
    background-color: var(--accent-highlight);
    color: var(--bg-main);
    border-color: var(--accent-highlight);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--accent-glow);
}

/* --- Tabela --- */
.password-table th, .password-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.password-table th {
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.password-item:hover {
    background-color: var(--accent-glow);
}
.password-display {
    cursor: pointer;
    user-select: none;
}

/* --- Przełącznik motywu --- */
#theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}
#theme-toggle:hover {
    transform: scale(1.1) rotate(20deg);
    box-shadow: 0 0 10px var(--accent-glow);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* --- ############################################# --- */
/* --- Specjalne Style dla Strony Logowania z Animacją 3D --- */
/* --- ############################################# --- */

.login-scene {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    overflow: hidden;
}

.login-flipper {
    position: relative;
    width: 400px;
    height: 500px;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.login-scene.initial .login-flipper {
    transform: rotateX(90deg) translateZ(-250px);
}

.login-scene.active .login-flipper {
    transform: rotateX(0deg) translateZ(0);
}

.login-prompt, .login-form-container {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-content);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.login-prompt {
    transform: rotateX(0deg);
    text-align: center;
}

.login-prompt h2 {
    font-size: 1.8rem;
}

.login-prompt p {
    color: var(--text-muted);
    margin-top: 1rem;
    font-size: 1.2rem;
    animation: pulse 2s infinite;
}

.login-form-container {
    transform: rotateX(-180deg);
    padding: 40px;
} i przechodze do login.html i jedyne co widze to to: <div class="login-prompt">
            <h2>[ AUTHENTICATION REQUIRED ]</h2>
            <p>Scroll Down to Begin</p>
        </div>