.b64-header { text-align:center; padding:1.6rem 1rem .4rem; }
.b64-header-emoji { font-size:2.4rem; display:block; }
.b64-header h1 { font-size:1.5rem; font-weight:800; margin:.3rem 0 .2rem; }
.b64-header p { color:var(--bs-secondary,#6b7280); margin:0; font-size:.9rem; }

.b64-shell { max-width:720px; margin:0 auto; padding:1rem; }
.b64-card { border-radius:16px; background:var(--bs-body-bg,#fff); box-shadow:0 1px 3px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.07); padding:1.2rem; }

.b64-label { font-size:.82rem; font-weight:600; margin-bottom:.35rem; display:flex; justify-content:space-between; align-items:center; }
.b64-area { width:100%; min-height:120px; padding:.7rem .85rem; border-radius:10px; border:1px solid rgba(0,0,0,.18);
            font-size:.95rem; font-family:ui-monospace,Consolas,monospace; resize:vertical; }
.b64-area:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }

.b64-row { display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0; align-items:center; justify-content:center; }
.b64-btn { border:none; border-radius:9px; padding:.55rem 1.1rem; font-weight:700; font-size:.88rem; cursor:pointer; color:#fff; }
.b64-btn.enc { background:#6366f1; }
.b64-btn.dec { background:#10b981; }
.b64-btn.ghost { background:transparent; color:var(--bs-body-color,#111); border:1px solid rgba(0,0,0,.18); }
.b64-btn:hover { filter:brightness(1.08); }

.b64-copy { border:none; background:transparent; cursor:pointer; color:#6366f1; font-size:.8rem; padding:.15rem .4rem; border-radius:6px; font-weight:600; }
.b64-copy:hover { background:rgba(99,102,241,.12); }
.b64-err { color:#ef4444; font-size:.85rem; margin-top:.6rem; min-height:1em; text-align:center; }
.b64-check { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--bs-body-color,#111); justify-content:center; }