/* base64-encoder-decoder.css v2-r4 */
.mode-tabs { display: inline-flex; border: 1px solid var(--border); margin-bottom: 1rem; }
.mode-tab  { font-size: 0.74rem; padding: 0.43rem 0.9rem; border: none; border-right: 1px solid var(--border); background: #f9fafb; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; }
.mode-tab:last-child { border-right: none; }
.mode-tab.active { background: var(--accent); color: #fff; }
.io-block-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 0.35rem; }
.io-textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--border); font-size: 0.84rem; background: #fff; resize: vertical; min-height: 160px; font-family: ui-monospace, monospace; line-height: 1.5; }
.io-textarea:focus { outline: none; border-color: var(--accent); }
.io-textarea.output { background: #f9fafb; }
.io-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; align-items: center; }
.copy-confirm { font-size: 0.72rem; color: #16a34a; display: none; }
.error-bar { margin-top: 0.4rem; padding: 0.45rem 0.65rem; border: 1px solid rgba(220,38,38,0.3); background: rgba(220,38,38,0.05); font-size: 0.78rem; color: #dc2626; display: none; }
.error-bar.show { display: block; }