.conv-container { max-width: 500px; margin: 20px auto; border: 1px solid var(--border); padding: 20px; background: rgba(0,0,0,0.1); }
.preview-box { width: 100%; height: 250px; background: #222; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; margin: 10px 0; }
#previewImage { max-width: 100%; max-height: 100%; object-fit: contain; display: none; }
.preview-placeholder { color: var(--accent); position: absolute; }

.tabs { display: flex; width: 100%; border-bottom: 2px solid var(--border); margin-top: 10px; }
.tab-btn { flex: 1; padding: 8px 0; background: var(--dark-bg); border: 1px solid var(--border); border-bottom: none; cursor: pointer; text-align: center; font-weight: bold; color: var(--secondary); margin-right: 2px; }
.tab-btn.active { background: var(--secondary); color: var(--dark-bg); }
.tab-content { display: none; border: 1px solid var(--border); border-top: none; padding: 15px; box-sizing: border-box; }
.tab-content.active { display: block; }

.input-group { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.input-group label { font-size: 14px; font-weight: bold; color: var(--primary); }
input[type="range"] { width: 60%; }
input[type="number"], select { background: var(--dark-bg); color: var(--primary); border: 1px solid var(--secondary); padding: 3px; }

.action-btn { width: 100%; padding: 10px; font-weight: bold; background: var(--primary); color: var(--dark-bg); border: none; cursor: pointer; margin-top: 10px; }
.action-btn:hover { background: var(--secondary); }
#downloadLink { display: none; margin-top: 15px; text-align: center; border: 1px dashed var(--primary); padding: 10px; text-decoration: none; color: var(--primary); font-weight: bold; width: 100%; box-sizing: border-box; }