.base64-body{background:#f4f6f8;height:100%;min-height:100%;padding:clamp(1rem,3vw,2.5rem);overflow-y:auto}.base64-workspace{width:min(100%,68rem);margin:0 auto}.base64-file-bar{background:#fff;border:1px solid #dce3ee;border-radius:.8rem;align-items:center;gap:.9rem;margin-bottom:1rem;padding:.85rem 1rem;display:flex;box-shadow:0 3px 12px #0f172a0a}.base64-file-icon{color:#2563eb;background:#eff6ff;border-radius:.65rem;flex:none;place-items:center;width:2.7rem;height:2.7rem;display:grid}.base64-file-copy{flex:1;min-width:0}.base64-file-copy strong{color:#172033;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;display:block;overflow:hidden}.base64-file-copy span{color:#6b788d;margin-top:.18rem;font-size:.74rem;display:block}.base64-change-button{color:#526078;cursor:pointer;background:#fff;border:1px solid #d8e0eb;border-radius:.5rem;padding:.52rem .72rem;font-size:.76rem;font-weight:750}.base64-change-button:hover{color:#1d4ed8;border-color:#93b4ef}.base64-panel{background:#fff;border:1px solid #dce3ee;border-radius:.9rem;overflow:hidden;box-shadow:0 8px 24px #0f172a0f}.base64-panel-header{border-bottom:1px solid #e6ebf3;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:clamp(1.25rem,3vw,1.8rem);display:flex}.base64-eyebrow{letter-spacing:.075em;text-transform:uppercase;align-items:center;gap:.38rem;font-weight:800;display:flex;color:#1d4ed8!important;font-size:.68rem!important}.base64-panel-header h1{color:#172033;letter-spacing:-.025em;margin-top:.38rem;font-size:clamp(1.35rem,4vw,1.8rem)}.base64-panel-header>div>p:last-child{color:#647188;max-width:45rem;margin-top:.45rem;font-size:.83rem;line-height:1.55}.base64-ready{color:#147a48;background:#edf9f2;border:1px solid #bae7cd;border-radius:999px;flex:none;align-items:center;gap:.3rem;padding:.4rem .55rem;font-size:.68rem;font-weight:800;display:inline-flex}.base64-panel-body{gap:1.15rem;padding:clamp(1.15rem,3vw,1.8rem);display:grid}.base64-format{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;display:grid}.base64-format button{text-align:left;cursor:pointer;background:#fff;border:1px solid #d9e1ec;border-radius:.6rem;gap:.16rem;padding:.82rem .9rem;display:grid}.base64-format button:hover{border-color:#9eb9e9}.base64-format button.active{background:#f0f6ff;border-color:#3b82f6;box-shadow:inset 0 0 0 1px #3b82f614}.base64-format strong{color:#253047;font-size:.8rem}.base64-format span{color:#748095;font-size:.69rem;line-height:1.4}.base64-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;display:grid}.base64-stats>div{background:#f8fafc;border:1px solid #e4e9f1;border-radius:.55rem;padding:.75rem .8rem}.base64-stats span{color:#7a8799;font-size:.65rem;font-weight:700;display:block}.base64-stats strong{color:#1e293b;margin-top:.2rem;font-size:.9rem;display:block}.base64-output{border:1px solid #dfe5ee;border-radius:.65rem;overflow:hidden}.base64-output-heading{background:#f8fafc;border-bottom:1px solid #e3e8f0;justify-content:space-between;align-items:center;gap:1rem;padding:.68rem .8rem;display:flex}.base64-output-heading label{color:#344056;font-size:.72rem;font-weight:800}.base64-output-heading span{color:#27805a;font-size:.65rem;font-weight:750}.base64-output-heading span.truncated{color:#a15c16}.base64-output textarea{resize:vertical;color:#27364d;overflow-wrap:anywhere;background:#fcfdff;border:0;outline:none;width:100%;min-height:18rem;padding:1rem;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.74rem;line-height:1.65;display:block}.base64-output>p{color:#7c6547;background:#fffbeb;border-top:1px solid #f4e8ba;padding:.58rem .8rem;font-size:.66rem;line-height:1.45}.base64-local-note{color:#526078;background:#f8fafc;border-radius:.55rem;align-items:flex-start;gap:.55rem;padding:.78rem .85rem;font-size:.72rem;line-height:1.5;display:flex}.base64-local-note svg{color:#2563eb;flex:none}.base64-actions{background:#f8fafc;border-top:1px solid #e3e8f0;justify-content:flex-end;gap:.7rem;padding:1rem clamp(1.15rem,3vw,1.8rem);display:flex}.base64-button{cursor:pointer;border-radius:.52rem;justify-content:center;align-items:center;gap:.42rem;min-height:2.75rem;padding:.68rem 1rem;font-size:.8rem;font-weight:780;display:inline-flex}.base64-button.primary{color:#fff;background:#2563eb;border:1px solid #2563eb}.base64-button.primary:hover{background:#1d4ed8}.base64-button.secondary{color:#1d4ed8;background:#fff;border:1px solid #b9cbed}.base64-button.secondary:hover{background:#eff6ff;border-color:#7da3e5}.base64-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172a52;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.base64-processing{text-align:center;background:#fff;border-radius:.8rem;place-items:center;width:min(24rem,100%);padding:2rem;display:grid;box-shadow:0 20px 60px #0f172a33}.base64-spinner{border:3px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;width:2.2rem;height:2.2rem;animation:.8s linear infinite base64-spin}.base64-processing h2{color:#172033;margin-top:.9rem;font-size:1.05rem}.base64-processing p{color:#69768b;margin-top:.35rem;font-size:.78rem}@keyframes base64-spin{to{transform:rotate(360deg)}}@media (width<=680px){.base64-body{padding:.7rem}.base64-panel-header{display:block}.base64-ready{margin-top:.8rem}.base64-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.base64-output textarea{min-height:15rem}.base64-actions{flex-direction:column}.base64-button{width:100%}.base64-change-button{font-size:0}.base64-change-button:after{content:"Change";font-size:.76rem}}@media (width<=440px){.base64-format,.base64-stats{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.base64-spinner{animation:none}}