body, html { margin: 0; padding: 0; height: 100%; font-family: Arial, sans-serif; } .app-container { height: 100vh; display: flex; flex-direction: column; } .splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; } .splash-content { position: relative; width: 80%; max-width: 1200px; height: 80%; } .splash-bg { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .splash-actions { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 10px; } .action-btn { padding: 12px 20px; background-color: #2c3e50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .action-btn:hover { background-color: #1a252f; } .main-content { flex: 1; display: flex; flex-direction: column; padding: 20px; } .toolbar { padding: 10px; background-color: #f8f9fa; display: flex; gap: 10px; margin-bottom: 10px; } .toolbar button { padding: 8px 16px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; } .excel-container { flex: 1; overflow: auto; border: 1px solid #ddd; } .file-input-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1001; } .modal-content { background-color: white; padding: 20px; border-radius: 8px; width: 400px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .modal-actions button { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; } #cancelBtn { background-color: #e74c3c; color: white; } #confirmBtn { background-color: #2ecc71; color: white; }