/* --- Global Styles & Variables --- */ :root { --primary-color: #007bff; --primary-hover: #0056b3; --secondary-color: #6c757d; --success-color: #28a745; --background-color: #f4f7f6; --card-background: #ffffff; --text-color: #333; --border-color: #dee2e6; --shadow: 0 4px 15px rgba(0, 0, 0, 0.08); --border-radius: 12px; } .tab-buttons { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); } .tab-button { padding: 12px 24px; background: none; border: none; font-size: 1rem; font-weight: 500; color: #000; cursor: pointer; transition: all 0.3s ease; border-bottom: 3px solid transparent; margin-bottom: -2px; } .tab-button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- Code Editor Styles (Side-by-Side) --- */ .code-editor-container { display: flex; gap: 20px; margin-bottom: 0px; } .editor-group { flex: 1; display: flex; flex-direction: column; } .editor-group label { display: block; font-weight: 500; margin-bottom: 8px; } .code-textarea { width: 100%; min-height: 250px; padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; font-family: 'Courier New', Courier, monospace; font-size: 14px; resize: vertical; background-color: #f8f9fa; transition: border-color 0.3s ease; color: #000; } .code-textarea:focus { outline: none; border-color: var(--primary-color); background-color: white; } /* --- Preview Pane Styles --- */ .preview-container { width: 100%; } .preview-container label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 20px; } #preview-pane { width: 100%; height: 300px; border: 1px solid var(--border-color); border-radius: 8px; background-color: white; } /* --- Drag & Drop Styles --- */ .drop-zone { border: 2px dashed var(--border-color); border-radius: var(--border-radius); padding: 20px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; background-color: #fafbfc; position: relative; } .drop-zone.dragover { border-color: var(--primary-color); background-color: #e7f3ff; transform: scale(1.02); } #upload-prompt i { font-size: 4rem; color: var(--secondary-color); margin-bottom: 20px; } #upload-prompt p { font-size: 1.1rem; color: var(--secondary-color); } #upload-prompt p strong { color: var(--primary-color); } #file-info { font-weight: 500; color: var(--success-color); } #file-info button { margin-left: 10px; padding: 5px 10px; background: var(--secondary-color); color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9rem; } #file-info button:hover { background: #5a6268; } /* --- Action Button --- */ .action-button { padding: 15px 30px; font-size: 1.1rem; font-weight: 500; color: white; background-color: #000; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; margin: 30px auto; display: block; /* Keep block for centering */ } /* New class to hide the button */ .hidden { display: none; } .action-button:hover:not(:disabled) { background-color: var(--primary-hover); transform: translateY(-2px); } .action-button:disabled { background-color: var(--secondary-color); cursor: not-allowed; opacity: 0.7; } /* --- Responsive Design --- */ @media (max-width: 768px) { .code-editor-container { flex-direction: column; } header h1 { font-size: 2rem; } .tab-button { padding: 10px 15px; font-size: 0.9rem; } .drop-zone { padding: 40px 15px; } #upload-prompt i { font-size: 3rem; } }