/* Base styles same as before, adding/updating specific sections */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: linear-gradient(135deg, #999ea3 0%, #464a4b 100%); min-height: 100vh; display: flex; justify-content: center; padding: 20px; color: #333; }

.container { width: 100%; max-width: 850px; display: flex; flex-direction: column; gap: 20px; }
header { text-align: center; color: white; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.hidden { display: none !important; }

/* Upload */
.upload-card { border: 2px dashed #cbd5e0; background: #f7fafc; text-align: center; cursor: pointer; transition: 0.3s; padding: 40px; }
.upload-card:hover { background: #ebf8ff; border-color: #4facfe; }
.upload-icon { font-size: 3rem; color: #a0aec0; margin-bottom: 15px; }

/* Media Containers */
.media-container { position: relative; background: #000; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; margin-bottom: 20px; }

/* Image */
#image-preview { max-width: 100%; max-height: 400px; object-fit: contain; }

/* Video */
#video-player { width: 100%; max-height: 400px; }
.video-controls { width: 100%; background: #2d3748; color: white; padding: 8px; text-align: center; font-size: 0.9rem; }

/* PDF */
#pdf-canvas { max-width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.pdf-controls { width: 100%; display: flex; justify-content: center; align-items: center; gap: 15px; padding: 10px; background: #f1f5f9; border-top: 1px solid #ddd; }
.btn-sm { padding: 5px 12px; background: #4facfe; color: white; border: none; border-radius: 4px; cursor: pointer; }
.btn-sm:disabled { background: #cbd5e0; cursor: not-allowed; }

/* Controls */
.remove-btn { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: #e53e3e; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* Progress */
.progress-container { margin-bottom: 20px; }
.progress-labels { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 5px; }
.progress-bar { height: 10px; background: #edf2f7; border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: #4facfe; width: 0%; transition: width 0.3s ease; }

/* Results */
.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.confidence-badge { font-size: 0.85rem; padding: 5px 10px; border-radius: 20px; font-weight: bold; background: #edf2f7; }
textarea { width: 100%; min-height: 150px; padding: 15px; border: 1px solid #e2e8f0; border-radius: 8px; resize: vertical; margin-bottom: 20px; background: #f8fafc; }

/* Buttons */
.btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; }
.btn-primary { background: #4facfe; color: white; }
.btn-action { width: 100%; background: linear-gradient(to right, #4facfe, #00f2fe); color: white; padding: 12px; font-size: 1.1rem; }
.btn-action:disabled { opacity: 0.7; cursor: not-allowed; }
.action-buttons { display: flex; gap: 10px; }
.btn-secondary { background: #4a5568; color: white; flex: 1; }
.btn-outline { background: transparent; border: 2px solid #e2e8f0; color: #4a5568; }

/* Toast */
.error-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #e53e3e; color: white; padding: 12px 24px; border-radius: 50px; font-weight: bold; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }