.dialogue-section {
		background: var(--surface-1);
			border-radius: var(--rounded-lg);
			padding: var(--spacing-lg);
			box-shadow: var(--shadow-md);
			border: 1px solid var(--hairline);
			margin-bottom: var(--spacing-xl);
		}
		
		.dialogue-section h2 {
			color: var(--ink);
			margin-bottom: var(--spacing-lg);
			font-size: 1.25rem;
			font-weight: 600;
			text-align: center;
			font-family: var(--font-sans);
		}
		
		.dialogue-paragraphs {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-md);
			margin-bottom: var(--spacing-lg);
		}
		
		.paragraph-item {
			background: var(--surface-3);
			border-radius: var(--rounded-md);
			padding: var(--spacing-md);
			border: 1px solid var(--hairline);
			position: relative;
			transition: var(--transition);
		}
		
		.paragraph-item:hover {
			border-color: var(--primary);
			box-shadow: 0 2px 8px var(--primary-subtle);
		}
		
		.paragraph-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: var(--spacing-sm);
		}
		
		.paragraph-role {
			display: flex;
			align-items: center;
			gap: var(--spacing-sm);
		}
		
		.paragraph-role select {
			background: var(--surface-1);
			border: 1px solid var(--hairline);
			color: var(--ink);
			padding: var(--spacing-xs) var(--spacing-sm);
			border-radius: var(--rounded-md);
			font-size: 0.875rem;
			transition: var(--transition);
			font-family: var(--font-sans);
			cursor: pointer;
			min-width: 150px;
		}
		
		.paragraph-role select:focus {
			outline: none;
			border-color: var(--primary);
			box-shadow: 0 0 0 3px var(--primary-subtle);
		}
		
		.remove-paragraph {
			background: rgba(239, 68, 68, 0.12);
			color: #ef4444;
			border: 1px solid rgba(239, 68, 68, 0.2);
			padding: var(--spacing-xs) var(--spacing-sm);
			border-radius: var(--rounded-sm);
			cursor: pointer;
			font-size: 0.875rem;
			font-weight: 500;
			transition: var(--transition);
		}
		
		.remove-paragraph:hover {
			background: rgba(239, 68, 68, 0.2);
		}
		
		.paragraph-text {
			width: 100%;
			min-height: 100px;
			padding: var(--spacing-md);
			border: 1px solid var(--hairline);
			border-radius: var(--rounded-md);
			background: var(--surface-2);
			color: var(--ink);
			font-size: 1rem;
			line-height: 1.6;
			transition: var(--transition);
			resize: vertical;
			font-family: var(--font-sans);
		}
		
		.paragraph-text:focus {
			outline: none;
			border-color: var(--primary);
			box-shadow: 0 0 0 3px var(--primary-subtle);
		}
		
		.add-paragraph {
			background: var(--primary);
			color: #fff;
			border: none;
			padding: var(--spacing-md);
			border-radius: var(--rounded-md);
			cursor: pointer;
			font-weight: 600;
			font-size: 1rem;
			box-shadow: var(--shadow-sm);
			width: 100%;
			text-align: center;
			transition: var(--transition-fast);
		}
		
		.add-paragraph:hover {
			background: var(--primary-hover);
			box-shadow: var(--shadow-md);
		}

		@media (max-width: 768px) {
			.paragraph-header {
				flex-direction: column;
				align-items: flex-start;
				gap: var(--spacing-sm);
			}
			
			.paragraph-role {
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
			}
			
			.paragraph-role select {
				width: 100%;
				min-width: auto;
			}
			
			.remove-paragraph {
				align-self: flex-end;
			}
		}
		
		#dialogue-generate-btn,
		#dialogue-download-btn,
		#dialogue-subtitle-btn,
		#dialogue-download-srt-btn {
			background: var(--primary);
			color: #fff;
			border: none;
			padding: 10px 20px;
			border-radius: var(--rounded-md);
			cursor: pointer;
			font-weight: 500;
			font-size: 0.875rem;
			transition: var(--transition-fast);
			min-height: 40px;
		}

		#dialogue-generate-btn:hover,
		#dialogue-download-btn:hover,
		#dialogue-subtitle-btn:hover,
		#dialogue-download-srt-btn:hover {
			background: var(--primary-hover);
			box-shadow: var(--shadow-md);
		}