/* Global Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #0a0a0a, #151515); /* Deeper, more intense dark gradient */
            color: #e0e0e0; /* Softer white for better readability */
            min-height: 100vh;
            line-height: 1.6;
            font-size: 16px; /* Base font size */
            display: flex; /* Flex container for body */
            flex-direction: column;
        }

        /* Container for content */
        .container {
            max-width: 1300px; /* Slightly wider */
            margin: 30px auto; /* More vertical margin */
            padding: 0 25px; /* More horizontal padding */
            flex-grow: 1; /* Allows container to expand */
        }

        /* Header Styling */
        .header {
            text-align: center;
            padding: 50px 30px; /* Increased padding */
            background: rgba(255, 255, 255, 0.04); /* Slightly lighter background for a subtle glow */
            border-radius: 25px; /* Softer rounded corners */
            margin-bottom: 50px; /* Increased bottom margin */
            border: 1px solid #2a2a2a; /* Darker, less distracting border */
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); /* Stronger, darker shadow */
        }

        .header h1 {
            font-size: 3.5em; /* Larger heading */
            margin-bottom: 20px;
            background: linear-gradient(135deg, #7e57c2, #ba68c8); /* More regal, dark purple gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 40px rgba(186, 104, 200, 0.6); /* More prominent glow */
            letter-spacing: 1px;
        }

        .header p {
            font-size: 1.2em; /* Slightly larger subtitle */
            color: #b0b0b0; /* Subtler color */
        }

        /* Navigation Tabs */
        .nav-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 50px;
            background: rgba(255, 255, 255, 0.06); /* Brighter tab background */
            border-radius: 18px; /* Consistent rounded corners */
            padding: 12px; /* More padding */
            gap: 12px; /* Increased gap */
            flex-wrap: wrap;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            border: 1px solid #3d3d3d; /* More visible border */
        }

        .tab-btn {
            padding: 16px 32px; /* Larger buttons */
            background: rgba(255, 255, 255, 0.12); /* More prominent default tab color */
            border: none;
            border-radius: 12px;
            color: #f5f5f5; /* Whiter text for clarity */
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
            font-size: 1.05em; /* Slightly larger font */
            font-weight: bold;
            flex-grow: 1; /* Allow tabs to grow if needed */
            min-width: 140px; /* Minimum width for tab buttons */
        }

        .tab-btn:hover {
            background: rgba(255, 255, 255, 0.25); /* Brighter on hover */
            transform: translateY(-3px) scale(1.02); /* More noticeable hover effect */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        .tab-btn.active {
            background: linear-gradient(135deg, #9c27b0, #7b1fa2); /* Intense active tab color (purple) */
            box-shadow: 0 0 25px rgba(156, 39, 176, 0.6); /* Prominent glow for active tab */
            color: white; /* Ensure text remains white */
            transform: translateY(-1px); /* Slightly raised */
            pointer-events: none; /* Disable interaction on active tab */
        }

        /* Tab Content Sections */
        .tab-content {
            display: none;
            background: rgba(255, 255, 255, 0.04);
            padding: 40px; /* Generous padding */
            border-radius: 25px; /* Matches header/container radius */
            border: 1px solid #2a2a2a;
            margin-bottom: 30px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.6s ease-out; /* Slower, smoother fade in */
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(25px); } /* More distinct starting point */
            to { opacity: 1; transform: translateY(0); }
        }

        .section-title {
            font-size: 2.5em; /* Larger section titles */
            margin-bottom: 40px; /* More spacing below title */
            text-align: center;
            background: linear-gradient(135deg, #7e57c2, #ba68c8); /* Consistent with header gradient */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 25px rgba(186, 104, 200, 0.4); /* Subtler title glow */
        }

        /* Forms */
        .form-group {
            margin-bottom: 30px; /* Increased vertical spacing */
        }

        .form-group label {
            display: block;
            margin-bottom: 12px; /* More space below labels */
            font-weight: bold;
            color: #cccccc;
            font-size: 1.15em; /* Larger labels */
        }

        /* Styling for inputs, selects, and textareas */
        .form-group input[type="text"],
        .form-group input[type="password"], /* Added for PIN input */
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 16px 20px; /* Generous padding */
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid #4a4a4a; /* Slightly stronger border */
            border-radius: 10px;
            color: #e0e0e0;
            font-size: 1.05em;
            resize: vertical;
            min-height: 55px; /* Minimum height */
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
            -webkit-appearance: none; /* Reset default browser styles */
            -moz-appearance: none;
            appearance: none;
        }
        
        .form-group textarea {
            min-height: 180px; /* Taller textarea */
        }

        .form-group input[type="text"]:focus,
        .form-group input[type="password"]:focus, /* Added for PIN input focus */
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #9c27b0; /* Active purple color */
            box-shadow: 0 0 18px rgba(156, 39, 176, 0.4); /* Stronger active glow */
            background-color: rgba(255, 255, 255, 0.15); /* Slightly brighter when focused */
        }

        /* Specific styling for the <select> element's expanded options */
        .form-group select option {
            background-color: #1a1a1a; /* Dark background for dropdown options */
            color: #e0e0e0; /* Light text color for options */
            border-bottom: 1px solid #333; /* Subtle separator */
            padding: 10px 15px; /* Padding for readability */
            font-size: 1em;
        }
        
        /* Highlight on hover for dropdown options */
        .form-group select option:hover {
            background-color: #7b1fa2; /* Purple background on hover for selection */
            color: white;
        }

        /* Keep the down arrow visible and styled if default arrow is hidden by appearance:none */
        .form-group select {
            background-image: url('data:image/svg+xml;utf8,<svg fill="%23e0e0e0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
            background-repeat: no-repeat;
            background-position: right 15px center; /* Position the arrow */
            padding-right: 40px; /* Make space for the arrow */
        }
        
        .file-upload {
            border: 2px dashed #6a6a6a; /* More visible dashed border */
            padding: 50px; /* Even more padding */
            text-align: center;
            border-radius: 12px;
            transition: all 0.3s ease;
            cursor: pointer;
            margin-bottom: 25px;
            background: rgba(255, 255, 255, 0.03); /* Subtle background */
            font-size: 1.1em;
            color: #bbbbbb;
        }

        .file-upload:hover {
            border-color: #ba68c8; /* Matches active elements */
            background: rgba(186, 104, 200, 0.08); /* Faint purple hover glow */
            box-shadow: 0 0 20px rgba(186, 104, 200, 0.2);
        }

        .file-info {
            margin-top: 15px; /* Increased top margin */
            color: #a0a0a0; /* Consistent subdued text */
            font-size: 0.95em;
            text-align: center;
        }
        .original-filename {
            color: #b8b8b8;
            font-style: italic;
        }


        /* Buttons - General Styles */
        .submit-btn, .download-btn, .download-btn-item, .delete-btn, .delete-btn-item,
        .modal-btn-cancel, .modal-btn-confirm {
            font-weight: bold;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .submit-btn {
            background: linear-gradient(135deg, #7e57c2, #ba68c8); /* Strong purple for main action */
            color: white;
            border: none;
            padding: 22px 45px; /* Generous button size */
            font-size: 1.3em; /* Larger font */
            border-radius: 10px;
            cursor: pointer;
            width: 100%;
        }

        .submit-btn:hover {
            transform: translateY(-4px) scale(1.01); /* More pronounced hover */
            box-shadow: 0 0 35px rgba(186, 104, 200, 0.7); /* Brighter, wider glow */
            background: linear-gradient(135deg, #673ab7, #9c27b0); /* Slightly darker gradient on hover */
        }

        /* Download Buttons */
        .highlight-download-section { /* Container for prominent latest download */
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid #333;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .highlight-download-section h3 {
            font-size: 1.8em;
            margin-bottom: 15px;
            color: #b0c4de; /* Softer blue for emphasis */
            text-shadow: 0 0 10px rgba(176, 196, 222, 0.3);
        }
        .highlight-download-section p {
            font-size: 1.1em;
            color: #c0c0c0;
            margin-bottom: 10px;
        }

        .download-btn { /* Main large download buttons */
            display: inline-block;
            padding: 16px 30px; /* Reduced padding slightly for text change, to allow "Download File" to fit */
            background: linear-gradient(135deg, #4CAF50, #2e8b57); /* Solid green gradient */
            color: white;
            text-decoration: none;
            border-radius: 12px;
            font-size: 1.2em; /* Reduced font slightly for text change */
            margin: 25px 0 15px 0; /* Adjusted margins */
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(46, 139, 87, 0.4);
        }

        .download-btn:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 0 40px rgba(46, 139, 87, 0.8);
            background: linear-gradient(135deg, #388e3c, #24683f); /* Darker green on hover */
        }

        .download-btn-item { /* Buttons within file list items */
            display: inline-block;
            padding: 10px 20px; /* Adjusted padding for "Download File" text */
            background: linear-gradient(135deg, #2196f3, #1976d2); /* Blue gradient for item downloads */
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-size: 0.9em; /* Adjusted font for "Download File" text */
            margin-top: 20px; /* More spacing */
            margin-right: 10px; /* Space between download and delete */
            border: none;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
        }

        .download-btn-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 20px rgba(25, 118, 210, 0.5);
            background: linear-gradient(135deg, #1976d2, #0d47a1); /* Darker blue on hover */
        }


        .exe-btn { /* EXE specific download button coloring */
            background: linear-gradient(135deg, #ef5350, #c62828); /* Red gradient */
            box-shadow: 0 6px 20px rgba(239, 83, 80, 0.4);
        }

        .exe-btn:hover {
            box-shadow: 0 0 40px rgba(239, 83, 80, 0.8);
            background: linear-gradient(135deg, #e53935, #b71c1c); /* Darker red on hover */
        }

        .exe-btn-item { /* EXE specific item download button coloring */
             background: linear-gradient(135deg, #e57373, #ef5350); /* Lighter red for item */
        }

        .exe-btn-item:hover {
            background: linear-gradient(135deg, #ef5350, #c62828);
        }


        /* Delete Buttons */
        .delete-btn, .delete-btn-item {
            background: linear-gradient(135deg, #f44336, #d32f2f); /* Strong red for delete */
            color: white;
            border: none;
            padding: 10px 20px; /* Adjusted padding for "Delete" text */
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9em; /* Adjusted font for "Delete" text */
            margin-bottom: 15px; /* Added margin for latest delete button */
        }

        .delete-btn:hover, .delete-btn-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 25px rgba(244, 67, 54, 0.6);
            background: linear-gradient(135deg, #d32f2f, #b71c1c); /* Darker red on hover */
        }
        
        .delete-btn-item {
            padding: 10px 20px; /* Consistent size with download-btn-item */
            font-size: 0.9em; /* Consistent size with download-btn-item */
        }

        .exe-btn-delete { /* Red for EXE download delete buttons */
            background: linear-gradient(135deg, #f44336, #d32f2f);
        }

        .exe-btn-delete:hover {
            background: linear-gradient(135deg, #d32f2f, #b71c1c);
        }
        .exe-btn-item-delete { /* Red for EXE item delete buttons */
            background: linear-gradient(135deg, #ff5252, #e53935);
        }
        .exe-btn-item-delete:hover {
            background: linear-gradient(135deg, #e53935, #d50000);
        }


        /* Message Displays (Universal) */
        .message {
            padding: 20px 25px;
            margin: 25px 0; /* More spacing */
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
            font-size: 1.1em;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        }

        .message.active {
            animation: fadeIn 0.5s ease-out; /* Uses the common fade-in animation */
        }

        .success {
            background: rgba(76, 175, 80, 0.25); /* More translucent */
            border: 1px solid #4CAF50;
            color: #81c784; /* Lighter success text */
        }

        .error {
            background: rgba(244, 67, 54, 0.25);
            border: 1px solid #f44336;
            color: #ef9a9a; /* Lighter error text */
        }

        .config-note {
            background: rgba(255, 193, 7, 0.15); /* More subtle yellow background */
            border: 1px solid #ffc107;
            color: #ffeb3b; /* Brighter yellow text */
            padding: 18px;
            border-radius: 10px;
            margin: 30px 0; /* More spacing */
            text-align: center;
            font-size: 0.95em;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        /* File Grids */
        .files-list-subheader {
            text-align: center;
            font-size: 1.8em;
            margin: 50px 0 30px 0; /* More prominent subheader */
            background: linear-gradient(135deg, #64b5f6, #42a5f5); /* Light blue gradient for secondary headings */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 15px rgba(66, 165, 245, 0.3);
            font-weight: bold;
        }
        
        .file-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Larger minimum item size */
            gap: 25px; /* More space between items */
            margin-top: 25px;
        }

        .file-item {
            background: rgba(255, 255, 255, 0.08); /* Brighter background */
            border: 1px solid #4a4a4a;
            border-radius: 12px; /* Smoother corners */
            padding: 25px; /* Generous padding */
            text-align: center;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
            display: flex; /* Make it a flex container for better vertical alignment */
            flex-direction: column;
            justify-content: space-between;
            align-items: center; /* Center items horizontally within flexbox */
        }

        .file-item:hover {
            transform: translateY(-7px) scale(1.02); /* More lift and scale */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            background: rgba(255, 255, 255, 0.12); /* Brighter on hover */
        }

        .file-item h3 {
            margin-bottom: 12px;
            font-size: 1.4em; /* Larger filename heading */
            color: #ffee58; /* Goldish-yellow for titles */
            word-wrap: break-word; /* Ensure long names don't break layout */
            max-width: 100%; /* Important for centering */
        }

        .file-item p {
            font-size: 1.0em; /* Slightly larger paragraph text */
            color: #cccccc;
            margin-bottom: 8px; /* Consistent spacing */
            word-wrap: break-word; /* Prevents overflow */
        }

        .no-files {
            text-align: center;
            padding: 30px;
            font-style: italic;
            color: #9a9a9a;
            font-size: 1.1em;
            margin-top: 20px;
        }


        /* MODAL STYLES (Delete Confirmation) */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8); /* Darker overlay */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px); /* Blurry background */
            animation: fadeIn 0.3s ease;
        }

        .modal-content {
            background: #2a2a2a; /* Dark background */
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
            width: 90%;
            max-width: 500px;
            text-align: center;
            border: 1px solid #4a4a4a;
            position: relative;
            animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Springy scale in */
        }

        .modal-content h3 {
            font-size: 1.8em;
            margin-bottom: 25px;
            color: #ba68c8;
        }

        .modal-content p {
            font-size: 1.1em;
            color: #bbbbbb;
            margin-bottom: 20px;
        }
        
        #modalFileName {
            font-weight: bold;
            color: #ffee58; /* Gold highlight for file name */
        }

        .modal-actions {
            margin-top: 30px;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .modal-btn-cancel, .modal-btn-confirm {
            padding: 12px 25px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 1em;
            font-weight: bold;
        }

        .modal-btn-cancel {
            background-color: #616161; /* Darker gray for cancel */
            color: white;
        }

        .modal-btn-cancel:hover {
            background-color: #757575;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .modal-btn-confirm {
            background-color: #d32f2f; /* Red for confirm */
            color: white;
        }

        .modal-btn-confirm:hover {
            background-color: #e53935;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
        }

        .modal-error-message {
            color: #ef9a9a; /* Lighter error text */
            margin-top: 15px;
            font-size: 0.9em;
        }

        @keyframes scaleIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }


        /* LOADING SPINNER STYLES - AGAIN, THESE ARE ALREADY IMPLEMENTED AND WORKING */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* Slightly lighter than modal overlay */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1001; /* Above modal */
            backdrop-filter: blur(3px);
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            gap: 20px;
        }

        .spinner {
            border: 8px solid rgba(255, 255, 255, 0.2);
            border-top: 8px solid #ba68c8; /* Purple spinner color */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }


        /* Responsive Adjustments (unchanged, just ensure they apply) */
        @media (max-width: 1024px) {
            .container {
                padding: 0 20px;
                margin: 20px auto;
            }
            .header h1 {
                font-size: 2.8em;
            }
            .nav-tabs {
                gap: 8px;
                padding: 10px;
            }
            .tab-btn {
                padding: 14px 25px;
                font-size: 1em;
            }
            .section-title {
                font-size: 2em;
            }
            .download-btn {
                padding: 16px 30px; /* Adjust again */
                font-size: 1.2em; /* Adjust again */
            }
            .file-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 20px;
            }
            .file-item h3 {
                font-size: 1.2em;
            }
            .delete-btn, .delete-btn-item { /* Adjust delete button font/padding */
                padding: 10px 20px;
                font-size: 0.9em;
            }
        }

        @media (max-width: 768px) {
            .nav-tabs {
                flex-direction: column;
            }
            .tab-btn {
                width: 100%;
                margin-bottom: 8px; /* Add vertical space when stacked */
            }
            .header {
                padding: 30px 15px;
            }
            .header h1 {
                font-size: 2.2em;
            }
            .header p {
                font-size: 1em;
            }
            .tab-content {
                padding: 25px;
            }
            .section-title {
                font-size: 1.8em;
            }
            .download-btn {
                padding: 12px 25px; /* Adjust again */
                font-size: 1.0em; /* Adjust again */
            }
            .download-btn-item, .submit-btn {
                padding: 12px 20px;
                font-size: 0.95em;
            }
            .file-grid {
                grid-template-columns: 1fr; /* Single column on small screens */
                gap: 15px;
            }
            .form-group label {
                font-size: 1em;
            }
            .form-group input, .form-group select, .form-group textarea {
                padding: 12px 15px;
            }
            .file-upload {
                padding: 30px;
            }
            .modal-content {
                padding: 30px;
            }
            .delete-btn, .delete-btn-item { /* Adjust delete button font/padding */
                padding: 8px 15px;
                font-size: 0.8em;
            }
        }

        @media (max-width: 480px) {
            .header h1 {
                font-size: 1.8em;
            }
            .section-title {
                font-size: 1.5em;
                margin-bottom: 25px;
            }
            .download-btn {
                font-size: 0.9em; /* Adjust again */
                padding: 10px 20px; /* Adjust again */
                margin: 15px 0;
            }
            .file-item h3 {
                font-size: 1.1em;
            }
            .config-note {
                padding: 12px;
                font-size: 0.85em;
            }
            .modal-content {
                padding: 20px;
            }
            .modal-content h3 {
                font-size: 1.4em;
            }
            .modal-content p {
                font-size: 0.95em;
            }
            .modal-actions {
                flex-direction: column;
                gap: 10px;
            }
            .delete-btn, .delete-btn-item { /* Adjust delete button font/padding */
                padding: 6px 12px;
                font-size: 0.7em;
            }
        }