.base64-container {
    max-width: 900px;
}

.converter-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.section-header label {
    font-weight: 600;
    color: var(--text-color);
}

.btn-text {
    color: var(--primary-color);
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.btn-text:hover {
    background: rgba(59, 130, 246, 0.1);
}

textarea {
    width: 100%;
    height: 200px;
    background: var(--bg-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    color: var(--text-color);
    font-family: monospace;
    font-size: 0.95rem;
    resize: vertical;
    outline: none;
    transition: border-color var(--transition-fast);
}

textarea:focus {
    border-color: var(--primary-color);
}

.controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.controls button {
    min-width: 150px;
}

@media (min-width: 768px) {
    /* Optional: Side-by-side layout for larger screens if desired, 
       but vertical stack is often better for long text. 
       Let's keep vertical for simplicity and better mobile support,
       but maybe make the controls stickier or more prominent. */
}