/* RESET & BASE STYLES */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: sans-serif;
            background-color: #f8f9fa;
            color: #333;
            text-align: center;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .logo { max-width: 200px; height: auto; margin-bottom: 20px; }

        /* THE POPUP MODAL */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.95);
            display: flex; justify-content: center; align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        input[type="number"] {
            padding: 10px;
            font-size: 1.2rem;
            width: 120px;
            border: 2px solid #ccc;
            border-radius: 5px;
            margin: 20px auto;
            display: block;
        }

        button {
            padding: 10px 20px;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 5px;
            border: none;
            background: #444;
            color: white;
            transition: 0.2s;
        }

        button:hover { background: #000; }

        footer  { font-size:9pt; color:#808080; }

        /* CONTENT VISIBILITY LOGIC */
        .after-dark-content { display: none; color: #d9534f; font-weight: bold; }
        
        /* This magic class shows/hides content when toggled */
        body.after-dark-active .g-rated { display: none; }
        body.after-dark-active .after-dark-content { display: block; }

        #main-site { padding: 20px; }
        .reset-btn { margin-top: 50px; background: transparent; color: #999; font-size: 0.8rem; }