/* Layout and states only. Exact text/CRLF handling remains in script.js. */
.base64-page .mode-selector { margin-bottom: 0; }
.mode-selector .up-button { flex: 1; }
.base64-textarea { min-height: 192px; font-family: ui-monospace, "Consolas", "Monaco", monospace; font-size: 16px; line-height: 1.6; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; }
.base64-textarea.error { border-color: var(--up-error); background: var(--up-error-surface); }
.textarea-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.textarea-count { font-size: 13px; line-height: 1.5; color: var(--up-muted); }
.base64-result .textarea-label, .base64-result .textarea-count { color: #fff; }
.base64-result .up-field { gap: 8px; }
.base64-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; line-height: 1.5; border-top: 1px solid #6a9081; padding-top: 12px; margin-top: 16px; font-variant-numeric: tabular-nums; }
.base64-result .swap-btn { width: 100%; margin-top: 12px; }
.base64-actions .up-button { min-width: 96px; }
.base64-page .error-message { display: none; }
.base64-page .error-message.show { display: block; }
.base64-note { margin-top: 16px; }
.base64-page .up-tool-help code { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .base64-textarea { min-height: 128px; }
  .base64-result .up-result-title { margin-bottom: 8px; }
  .base64-stats { margin-top: 12px; padding-top: 8px; }
}