.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 15, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2000; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.4s ease; } .lightbox.active { display: flex; opacity: 1; } .lightbox-content { position: relative; width: 90%; max-width: 960px; background: var(--secondary); padding: 1rem; border-radius: var(--border-radius-lg); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5); border: 1px solid var(--glass-border); transform: scale(0.95); transition: transform 0.4s ease; } .lightbox.active .lightbox-content { transform: scale(1); } .lightbox-close { position: absolute; top: -15px; right: -15px; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; background: var(--accent); color: var(--primary); border: none; border-radius: 50%; font-size: 1.1rem; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .lightbox-close:hover { transform: scale(1.1) rotate(90deg); background: var(--accent-dark); box-shadow: 0 6px 15px rgba(0, 224, 255, 0.4); } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--border-radius-md); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .notification { position: relative; min-width: 280px; max-width: 350px; margin-bottom: 1rem; padding: 1.1rem 1.5rem; border-radius: var(--border-radius-md); background: var(--secondary); color: var(--text-primary); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); border: 1px solid var(--glass-border); border-left-width: 5px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateX(120%); opacity: 0; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; overflow: hidden; } .notification.show { transform: translateX(0); opacity: 1; } .notification-content { display: flex; align-items: center; gap: 1rem; } .notification i.fas { font-size: 1.2rem; line-height: 1; } .notification span { flex: 1; } .notification.success { border-left-color: var(--success); } .notification.error { border-left-color: var(--danger); } .notification.info { border-left-color: var(--info); } .notification.warning { border-left-color: var(--warning); } .light-theme .notification { color: var(--text-primary); } .modal-backdrop { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal-content { background-color: var(--secondary); color: var(--text-primary); border: 1px solid var(--glass-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.03); } .modal-title { color: var(--accent); font-family: 'Orbitron', sans-serif; font-size: 1.3rem; } .modal-footer { border-top: 1px solid var(--glass-border); background: rgba(10, 10, 15, 0.5); padding: 1rem; } .modal .btn-close { filter: invert(1) grayscale(100%) brightness(150%) opacity(0.8); transition: transform 0.3s ease; } .modal .btn-close:hover { filter: invert(1) grayscale(100%) brightness(200%) opacity(1); transform: rotate(90deg); } .light-theme .modal-content { background-color: var(--secondary); } .light-theme .modal-header, .light-theme .modal-footer { background-color: var(--primary); } #settingsModal .nav-tabs { border-bottom: 1px solid var(--glass-border); padding: 0.5rem 1rem 0; background-color: rgba(10,10,15,0.7); } .light-theme #settingsModal .nav-tabs { background-color: var(--primary); } #settingsModal .nav-tabs .nav-link { border: none; color: var(--text-secondary); border-bottom: 3px solid transparent; transition: var(--transition); padding: 0.8rem 1.2rem; font-weight: 500; } #settingsModal .nav-tabs .nav-link:hover { color: var(--text-primary); border-bottom-color: var(--glass-border); } #settingsModal .nav-tabs .nav-link.active { color: var(--accent); background-color: transparent; border-bottom-color: var(--accent); font-weight: 600; } #settingsModal .tab-content label { font-weight: 500; } #settingsModal .tab-content p, #settingsModal .tab-content .text-muted { color: var(--text-secondary); } #settingsModal .tab-content h5 { color: var(--text-primary); } #settingsModal .tab-content input[type="checkbox"] { margin-right: 0.6rem; transform: scale(1.1); accent-color: var(--accent); } #editor { height: 300px; width: 100%; border-radius: var(--border-radius-md); border: 1px solid var(--glass-border); font-family: monospace;