.b64-content{--b64-primary:#6366f1;--b64-primary-hover:#4f46e5;--b64-primary-bg:#6366f112;--b64-bg:#fff;--b64-bg-toolbar:#f1f5f9;--b64-bg-tertiary:#f8fafc;--b64-text:#1e293b;--b64-text-secondary:#475569;--b64-text-muted:#64748b;--b64-text-placeholder:#94a3b8;--b64-border:#e2e8f0;--b64-border-light:#f1f5f9;--b64-border-input:#dde3ec;--b64-shadow:0 1px 3px #00000014,0 4px 12px #0000000a;--b64-shadow-focus:0 0 0 3px #6366f126;--b64-error:#ef4444;--b64-error-bg:#ef44440f;--b64-success:#10b981;--b64-radius:.875rem;--b64-radius-sm:.5rem;--b64-radius-xs:.375rem;display:flex;flex-direction:column;gap:1rem;color:var(--b64-text)}.b64-content *{box-sizing:border-box}.b64-toolbar{justify-content:space-between;padding:.625rem 1.25rem;background:var(--b64-bg);border:1px solid var(--b64-border);border-radius:var(--b64-radius);box-shadow:var(--b64-shadow)}.b64-toolbar,.b64-toolbar-left,.b64-toolbar-right{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}.b64-mode-toggle{display:flex;overflow:hidden;border:1px solid var(--b64-border);border-radius:var(--b64-radius-sm)}.b64-mode-btn{padding:.3125rem .875rem;border:none;background:var(--b64-bg);color:var(--b64-text-muted);font-size:.8125rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}.b64-mode-btn:first-child{border-right:1px solid var(--b64-border)}.b64-mode-btn:hover{background:var(--b64-bg-toolbar)}.b64-mode-btn.active{background:var(--b64-primary);color:#fff}.b64-toggle-label{display:inline-flex;align-items:center;gap:.375rem;color:var(--b64-text-muted);font-size:.8125rem;font-weight:500;white-space:nowrap;cursor:pointer}.b64-toggle-label input{width:.875rem;height:.875rem;accent-color:var(--b64-primary);cursor:pointer}.b64-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;transition:background-color .15s,color .15s}.b64-btn:focus-visible{outline:2px solid var(--b64-primary);outline-offset:2px}.b64-btn-icon{padding:.4375rem;border-radius:var(--b64-radius-xs);color:var(--b64-text-muted)}.b64-btn-icon:hover{background:var(--b64-bg-toolbar);color:var(--b64-text)}.b64-btn-danger:hover{color:var(--b64-error);background:var(--b64-error-bg)}.b64-file-input{display:none}.b64-panels{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.b64-panel{display:flex;flex-direction:column;min-height:340px;overflow:hidden;background:var(--b64-bg);border:1px solid var(--b64-border);border-radius:var(--b64-radius);box-shadow:var(--b64-shadow)}.b64-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem 1.25rem;border-bottom:1px solid var(--b64-border);background:var(--b64-bg-toolbar)}.b64-panel-title{gap:.375rem;color:var(--b64-text-muted);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.b64-panel-title,.b64-title-icon{display:inline-flex;align-items:center}.b64-title-icon{justify-content:center;flex:none;width:20px;height:20px;border-radius:var(--b64-radius-xs)}.b64-title-input .b64-title-icon{color:var(--b64-primary);background:var(--b64-primary-bg)}.b64-title-output .b64-title-icon{color:var(--b64-success);background:#10b9811a}.b64-panel-badge{display:inline-flex;align-items:center;gap:.25rem;max-width:55%;padding:.125rem .5rem;border-radius:9999px;background:var(--b64-primary-bg);color:var(--b64-primary);font-size:.6875rem;font-weight:600}.b64-panel-badge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b64-editor-wrapper{display:flex;flex:1 1;overflow:hidden}.b64-textarea{width:100%;flex:1 1;padding:.875rem 1.25rem;border:none;outline:none;resize:none;background:var(--b64-bg);color:var(--b64-text);font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:break-word;overflow-y:auto}.b64-textarea::placeholder{color:var(--b64-text-placeholder);font-family:inherit}.b64-textarea:focus{box-shadow:inset 0 0 0 2px var(--b64-primary-bg)}.b64-output-wrapper{position:relative;flex:1 1;overflow:auto}.b64-text-view{height:100%;overflow:auto}.b64-text-pre{margin:0;min-height:100%;padding:.875rem 1.25rem;color:var(--b64-text);font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all}.b64-error-box{padding:.625rem 1.25rem;border-bottom:1px solid #ef444433;background:#ef44440d}.b64-error-header{display:flex;align-items:center;gap:.375rem;margin-bottom:.25rem;color:var(--b64-error);font-size:.8125rem;font-weight:600}.b64-error-message{color:var(--b64-text);font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}.b64-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;height:100%;padding:2rem 1.25rem;color:var(--b64-text-muted);text-align:center}.b64-empty-state svg{opacity:.35}.b64-empty-state p{margin:0;font-size:.8125rem;line-height:1.8}.b64-status-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;min-height:2.25rem;padding:.5rem 1.25rem;background:var(--b64-bg);border:1px solid var(--b64-border);border-radius:var(--b64-radius);box-shadow:var(--b64-shadow);font-size:.6875rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.b64-status-left,.b64-status-right{display:flex;align-items:center;gap:.625rem}.b64-status-indicator{display:inline-flex;align-items:center;gap:.375rem;font-weight:600}.b64-status-indicator.is-valid{color:var(--b64-success)}.b64-status-indicator.is-invalid{color:var(--b64-error)}.b64-status-indicator.is-empty,.b64-status-item{color:var(--b64-text-muted)}.b64-status-sep{color:var(--b64-border)}.b64-notice:empty{display:none}.b64-notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:30;max-width:calc(100% - 30px);padding:12px 16px;background:#263247;color:#fff;border-radius:10px;box-shadow:0 5px 22px #26324730;font-size:12px}@media(max-width:768px){.b64-panels{grid-template-columns:1fr}.b64-panel{min-height:240px}.b64-toolbar{padding:.625rem .875rem}.b64-toolbar-left,.b64-toolbar-right{gap:.5rem}}@media(max-width:480px){.b64-panel-header{padding:.5rem .875rem}.b64-text-pre,.b64-textarea{padding:.75rem .875rem;font-size:12px}.b64-status-bar{flex-direction:column;align-items:flex-start;gap:.25rem}.b64-status-sep{display:none}.b64-status-right{gap:.5rem}}