body { font-family: 'Inter', sans-serif; } /* --- Navigation Pill Styles (New Layout) --- */ .tab-nav-container { /* Background for the pill container */ background-color: #f1f5f9; /* slate-100 */ border-radius: 0.75rem; /* rounded-xl */ padding: 0.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .tab-btn { padding: 0.5rem 1rem; font-weight: 600; font-size: 0.875rem; /* 14px */ color: #64748b; /* slate-500 */ border-radius: 0.5rem; /* rounded-lg */ transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent; background-color: transparent; } .tab-btn:hover { background-color: #e2e8f0; /* slate-200 */ color: #334155; /* slate-700 */ } .tab-btn.active { background-color: #ffffff; color: #4f46e5; /* indigo-600 */ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); border-color: #e2e8f0; } /* --- Styles from Verifier App --- */ .custom-file-upload { border: 2px dashed #cbd5e1; padding: 1rem 1.5rem; cursor: pointer; transition: all 0.3s ease; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .custom-file-upload:hover, .dragover { border-color: #4f46e5; background-color: #f8fafc; } input[type="file"] { display: none; } .spinner { border: 4px solid rgba(0, 0, 0, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: #4f46e5; animation: spin 1s ease infinite; } /* --- Styles from Merger App --- */ #mergerTab textarea::-webkit-scrollbar, #mergerTab div::-webkit-scrollbar { width: 8px; } #mergerTab textarea::-webkit-scrollbar-track, #mergerTab div::-webkit-scrollbar-track { background: #e2e8f0; } #mergerTab textarea::-webkit-scrollbar-thumb, #mergerTab div::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } #mergerTab textarea::-webkit-scrollbar-thumb:hover, #mergerTab div::-webkit-scrollbar-thumb:hover { background: #64748b; } /* --- Styles from Translator App --- */ @keyframes spin { to { transform: rotate(360deg); } } /* --- Styles for Transcriber Tab --- */ #transcriberTab input[type="file"]::file-selector-button { background: #4F46E5; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s; font-weight: 600; font-size: 0.875rem; } #transcriberTab input[type="file"]::file-selector-button:hover { background: #4338CA; } /* --- Styles for Alternative (Rephraser) Tab --- */ #alternativeTab textarea { font-family: 'Inter', sans-serif; } #alternativeTab textarea:focus { border-color: #4f46e5; box-shadow: 0 0 0 1px #4f46e5; outline: none; } /* --- Styles for Resync Tab --- */ .resync-line-input { width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 0.375rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: all 0.2s; } .resync-line-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 1px #4f46e5; outline: none; } .resync-line-input::-webkit-outer-spin-button, .resync-line-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .resync-line-input[type=number] { -moz-appearance: textfield; } /* --- API Checker Styles --- */ .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; } .status-badge.success { background-color: #d1fae5; color: #059669; } .status-badge.error { background-color: #fee2e2; color: #dc2626; } .status-badge.warning { background-color: #fef3c7; color: #d97706; } .status-badge.loading { background-color: #e2e8f0; color: #475569; }