.base64-tool-shell { max-width: 960px; }
.drop-zone { border: 2px dashed var(--bs-border-color); border-radius: .75rem; padding: 2.25rem 1rem; text-align: center; background: var(--bs-body-bg); transition: border-color .15s, background-color .15s; }
.drop-zone.is-dragging { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.drop-zone:focus-within { outline: 3px solid rgba(var(--bs-primary-rgb), .25); outline-offset: 2px; }
.image-preview { min-height: 12rem; display: grid; place-items: center; border-radius: .5rem; background: var(--bs-tertiary-bg); overflow: hidden; }
.image-preview img { display: block; max-width: 100%; max-height: 28rem; object-fit: contain; }
.base64-output { min-height: 12rem; font-family: var(--bs-font-monospace); font-size: .85rem; }
#base64Input { min-height: 16rem; font-family: var(--bs-font-monospace); font-size: .85rem; }
@media (max-width: 575.98px) { .drop-zone { padding: 1.5rem .75rem; } .base64-output { min-height: 9rem; } }