.b64-tab-content { padding-top: 16px; }
.b64-pane-wrap { display: flex; gap: 10px; }
.b64-pane { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.b64-pane label { font-weight: bold; }
.b64-pane textarea {
	width: 100%;
	min-height: 300px;
	font-family: monospace;
	font-size: 13px;
	resize: vertical;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.b64-btn { margin-top: 4px; }
.b64-action-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b64-status { font-size: 13px; font-weight: bold; }
.b64-status.ok  { color: #27ae60; }
.b64-status.err { color: #e74c3c; }
.b64-file-area { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.b64-file-info { font-size: 13px; color: #555; }
#b64_file_result { width: 100%; height: 160px; font-family: monospace; font-size: 12px; resize: vertical; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
#b64_file_chars { font-size: 12px; color: #777; }
.b64-img-preview-label { font-weight: bold; margin: 10px 0 6px; }
.b64-img-preview { max-width: 100%; max-height: 300px; border: 1px solid #ddd; border-radius: 4px; display: block; }
.b64-datauri-tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.b64-datauri-tab.active { background: #337ab7; color: #fff; border-color: #337ab7; }
.b64-datauri-tag { width: 100%; height: 160px; font-family: monospace; font-size: 12px; resize: vertical; padding: 8px; border: 1px solid #ccc; border-radius: 4px; word-break: break-all; }
@media (max-width: 767px) {
	.b64-pane-wrap { flex-direction: column; }
}