/* --- VARIÁVEIS E TEMA --- */
:root {
	--orange-brand : #FF570E;
	--orange-hover : #FF8956;
	--dark-bg      : #1A1A1A;
	--white        : #FFF;
	--border       : #DDD;
	--radius       : 8px;
	--text-main    : #333;
	--blue-accent  : #4A90E2;
}

/* --- ESTILOS GERAIS E TIPOGRAFIA --- */
h1 {
	font-size     : 2.2rem;
	margin-bottom : 10px;
}

h2 {
	font-size     : 1.5rem;
	margin-bottom : 15px;
	color         : var(--blue-accent);
}

.fade-in {
	animation : fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
	from { opacity : 0; }
	to { opacity : 1; }
}

/* --- HEADER / AREA AUDIO --- */
.audio {
	text-align    : center;
	background    : var(--dark-bg);
	padding       : 40px 20px;
	border-radius : var(--radius);
	margin-bottom : 30px;
	border-bottom : 5px solid var(--orange-brand);
	color         : white;
	margin-top    : 50px;
}

.audio h1 { color : var(--white); font-weight : 800; }

/* --- ÁREA DE UPLOAD --- */
.upload-area {
	background    : var(--white);
	border        : 3px dashed var(--blue-accent);
	border-radius : 15px;
	padding       : 50px 20px;
	text-align    : center;
	transition    : all 0.3s ease;
	cursor        : pointer;
	margin-bottom : 30px;
}

.upload-area:hover, .upload-area.dragover {
	border-color : var(--orange-brand);
	background   : #FFF7ED;
}

.upload-icon {
	font-size     : 3rem;
	color         : var(--orange-brand);
	margin-bottom : 15px;
}

.file-input { display : none; }

.upload-btn {
	background    : var(--dark-bg);
	color         : white;
	padding       : 12px 25px;
	border        : none;
	border-radius : var(--radius);
	font-weight   : 700;
	cursor        : pointer;
	margin        : 15px 0;
	transition    : background 0.3s;
}

.upload-btn:hover { background : var(--orange-brand); }

/* --- CONFIGURAÇÃO E FORMATOS --- */
.config-area, .progress-area, .download-area {
	background    : var(--white);
	padding       : 30px;
	border-radius : var(--radius);
	box-shadow    : 0 4px 10px rgba(0, 0, 0, 0.1);
	display       : none; /* Controlado via JS */
	margin-bottom : 40px;
}

.file-info {
	display        : flex;
	align-items    : center;
	margin-bottom  : 20px;
	padding-bottom : 15px;
	border-bottom  : 1px solid #EEE;
}

.file-icon {
	font-size    : 36px;
	color        : var(--blue-accent);
	margin-right : 15px;
}

.format-options {
	display               : grid;
	grid-template-columns : repeat(auto-fit, minmax(80px, 1fr));
	gap                   : 10px;
	margin                : 20px 0;
}

.format-option {
	padding       : 15px;
	border        : 2px solid var(--border);
	border-radius : var(--radius);
	text-align    : center;
	font-weight   : 800;
	cursor        : pointer;
	transition    : 0.2s;
	background    : #F5F5F5;
}

.format-option:hover { border-color : var(--orange-brand); color : var(--orange-brand); }
.format-option.selected, .format-option.active {
	background   : var(--orange-brand);
	border-color : var(--blue-accent);
	color        : white;
}

/* --- QUALIDADE --- */
.quality-selection {
	margin-top    : 25px;
	padding       : 20px;
	background    : #F8FAFC;
	border-radius : var(--radius);
	border        : 1px solid var(--border);
}

.quality-options {
	display        : flex;
	flex-direction : column;
	gap            : 12px;
}

.quality-option {
	display       : flex;
	align-items   : center;
	cursor        : pointer;
	padding       : 8px 12px;
	background    : white;
	border        : 1px solid var(--border);
	border-radius : 6px;
	transition    : all 0.2s ease;
}

.quality-option:hover {
	border-color : var(--orange-brand);
	background   : #FFF7ED;
}

.quality-option input[type="radio"] {
	width        : 18px;
	height       : 18px;
	margin-right : 12px;
	accent-color : var(--orange-brand);
}

/* --- OPÇÕES AVANÇADAS --- */
.advanced-toggle {
	background  : none;
	border      : none;
	color       : var(--orange-hover);
	font-weight : 700;
	cursor      : pointer;
	margin      : 20px 0;
	display     : flex;
	align-items : center;
}

.advanced-options {
	display               : none; /* Controlado via JS */
	grid-template-columns : 1fr 1fr;
	gap                   : 20px;
	background            : #F8FAFC;
	padding               : 20px;
	border-radius         : var(--radius);
	margin-bottom         : 20px;
}

.option-group label {
	display       : block;
	margin-bottom : 5px;
	font-weight   : 500;
}

.option-group select, .option-group input {
	width         : 100%;
	padding       : 8px;
	border        : 1px solid var(--border);
	border-radius : 4px;
}

/* --- PROGRESSO E CONVERSÃO --- */
.progress-bar-container {
	height        : 15px;
	background    : #E2E8F0;
	border-radius : 10px;
	overflow      : hidden;
	margin        : 20px 0;
}

.progress-bar {
	height     : 100%;
	background : var(--orange-brand);
	width      : 0%;
	transition : width 0.3s ease;
}

.convert-btn {
	width         : 100%;
	padding       : 18px;
	background    : var(--orange-brand);
	color         : white;
	border        : none;
	border-radius : var(--radius);
	font-size     : 1.2rem;
	font-weight   : 800;
	cursor        : pointer;
	transition    : background 0.3s;
}

.convert-btn:hover { background : #E64A19; }

/* --- DOWNLOAD --- */
.success-icon {
	font-size     : 48px;
	color         : var(--orange-brand);
	margin-bottom : 15px;
}

.download-btn {
	background      : var(--orange-brand);
	color           : white;
	padding         : 12px 24px;
	border-radius   : 4px;
	font-weight     : 800;
	text-decoration : none;
	display         : inline-block;
	margin-bottom   : 15px;
}

.restart-btn {
	background    : transparent;
	color         : var(--orange-brand);
	border        : 1px solid var(--blue-accent);
	padding       : 10px 20px;
	border-radius : 4px;
	cursor        : pointer;
	transition    : all 0.3s;
}

.restart-btn:hover { background : #F0F7FF; }

/* --- RESPONSIVIDADE --- */
@media (max-width : 768px) {
	.advanced-options { grid-template-columns : 1fr; }

	.format-options {
		grid-template-columns : 1fr;
	}

	h1 { font-size : 1.8rem; }
}