.container { max-width: 1200px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; }

header { text-align: center; margin-bottom: 30px; }

.image-upload-section { margin-bottom: 20px; text-align: center; }
.upload-btn { padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }

.image-container { position: relative; display: inline-block; margin: 20px 0; border: 2px dashed #ccc; }
#previewImage { max-width: 100%; max-height: 500px; object-fit: contain; }

.subtitle-input-section { margin: 20px 0; text-align: center; }
#subtitleInput { padding: 10px; width: 60%; margin-right: 10px; }
#addSubtitleBtn { padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; }

.subtitle-container { position: absolute; bottom: 0; left: 0; width: 100%; }
.subtitle-line { background: transparent; color: white; padding: 8px 15px; margin: 0; display: flex; justify-content: space-between; align-items: center; text-shadow: 0 0 2px black; }
.subtitle-text { flex-grow: 1; }
.remove-btn { background: #f44336; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) { #subtitleInput { width: 80%; } }