:root {
            --bg-dark: #0f172a;
            --bg-card: #1e293b;
            --primary-accent: #6366f1;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --text-white: #ffffff;
            --placeholder-color: #cbd5e1;
        }

        
        * {
            font-family: 'Poppins', sans-serif;
        }
        
        /* Default text color sa buong website */
        body {
            color: var(--text-white);
        }
        
        /* ✅ TAMA AT PROTETO NA CSS: */
        #notification-box,
        #notification-box *,
        #notification-box #notif-text {
            color: #000000 !important; /* ITIM ANG TEXT SA NOTIFICATION */
            font-weight: 600 !important;
            opacity: 1 !important;
            text-shadow: none !important;
        }
        
        /* Tiyakin na PUTI ang text sa mga card, table, at dashboard forms */
        .card, .table, .table td, .table th, form label {
            color: var(--text-white) !important;
        }

        body { background-color: var(--bg-dark); min-height: 100vh; margin: 0; overflow-x: hidden; }

        /* Navbar Design */
        .navbar { background-color: var(--bg-card); border-bottom: 1px solid #334155; padding: 1rem 0; z-index: 1050; }
        .navbar-brand { font-weight: 800; color: var(--primary-accent) !important; cursor: pointer; font-size: 1.5rem; }
        .nav-link { cursor: pointer; font-weight: 500; opacity: 0.8; transition: 0.3s; margin: 0 10px; }
        .nav-link:hover { opacity: 1; color: var(--primary-accent) !important; }

        /* Cards and Components */
        .card { background-color: var(--bg-card); border: 1px solid #475569; border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); padding: 2rem; }
        .btn-quizit { background-color: var(--primary-accent); border: none; padding: 12px; border-radius: 12px; font-weight: 700; text-transform: uppercase; width: 100%; transition: 0.3s; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
        .btn-quizit:hover { transform: translateY(-3px); filter: brightness(1.1); }
        
        .form-control { background-color: #0f172a !important; border: 2px solid #334155 !important; color: #ffffff !important; padding: 15px; border-radius: 12px; }
        .form-control::placeholder { color: var(--placeholder-color) !important; opacity: 1; }

        .hidden-section { display: none !important; }

        /* Profile Layout */
        .pfp-container { position: relative; width: 150px; height: 150px; margin: 0 auto 20px; }
        .pfp-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-accent); background: #0f172a; }
        .pfp-upload-icon { position: absolute; bottom: 5px; right: 5px; background: var(--primary-accent); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid var(--bg-card); }

        /* Stats and Tabs */
        .badge-stats { padding: 5px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; display: inline-block; margin-right: 5px; background: rgba(99, 102, 241, 0.15); border: 1px solid var(--primary-accent); }
        .nav-pills .nav-link { color: #94a3b8 !important; font-weight: 600; padding: 10px 25px; border-radius: 8px; transition: 0.3s; }
        .nav-pills .nav-link.active { background-color: var(--primary-accent) !important; color: white !important; }

        #notification-box { position: fixed; top: 30px; right: 30px; z-index: 9999; display: none; min-width: 320px; border-radius: 15px; }

        /* Loader */
        #sync-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-dark); z-index: 10000; display: flex; justify-content: center; align-items: center; flex-direction: column; }

        .hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; }

.hidden-section {
    display: none !important;
}

.app-section {
    display: block;
}

.tab-logs-btn {
    display: none;
}
#tab-logs-btn {
  display: none;
}
#admin-section {
  display: none;
}
.hidden-section {
    display: none !important;
}

/* Custom Sidebar Style Overrides for QuizIt SPA Grid */
#v-pills-tab .nav-link {
    color: #cbd5e1;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

#v-pills-tab .nav-link:hover {
    background: #334155;
    color: #ffffff;
}

#v-pills-tab .nav-link.active {
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-weight: 600;
    border-color: #6366f1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px d4px -1px rgba(0, 0, 0, 0.06);
}


.bg-black {
    background-color: #0f172a !important; 
}