.base64-app-main{box-sizing:border-box;flex-direction:column;gap:0;width:100%;max-width:1200px;margin:0 auto;padding:0 20px;animation:.8s cubic-bezier(.16,1,.3,1) fadeUp;display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.base64-controls{background:var(--ds-bg-card,#0a0a1273);border:1px solid var(--ds-border,#ffffff14);border-radius:var(--ds-r-lg,14px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--ds-shadow-sm);z-index:50;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:8px 16px;display:flex;position:relative}.base64-mode-toggle{border-radius:var(--ds-r-md,8px);border:1px solid var(--ds-border,#ffffff14);background:#ffffff0a;gap:4px;padding:3px;display:flex}.base64-mode-btn{color:var(--ds-text-muted,#fff9);letter-spacing:.5px;border-radius:var(--ds-r-sm,6px);transition:all .2s var(--ds-ease);cursor:pointer;background:0 0;border:1px solid #0000;padding:5px 14px;font-size:11px;font-weight:700}.base64-mode-btn.active{background:linear-gradient(135deg, var(--ds-accent,#10b981) 0%, var(--ds-accent-alt,#06b6d4) 100%);color:#fff;box-shadow:var(--ds-shadow-btn,0 4px 14px #10b98138);border-color:#10b9814d}.base64-urlsafe-label{cursor:pointer;color:var(--ds-text-muted,#ffffffb3);border-radius:var(--ds-r-md,8px);border:1px solid var(--ds-border,#ffffff14);background:#ffffff0a;align-items:center;gap:8px;padding:5px 12px;font-size:11px;font-weight:600;transition:all .2s;display:flex}.base64-urlsafe-label:hover{background:var(--ds-bg-hover,#ffffff14);color:#fff}.base64-urlsafe-checkbox{accent-color:var(--ds-accent,#10b981)}.base64-upload-btn{border:1px solid var(--ds-border,#ffffff14);border-radius:var(--ds-r-md,8px);color:var(--ds-text,#fff);cursor:pointer;background:#ffffff0a;align-items:center;gap:8px;padding:6px 14px;font-size:11px;font-weight:700;transition:all .2s;display:inline-flex}.base64-upload-btn:hover{background:var(--ds-bg-hover,#ffffff14);border-color:var(--ds-border-hover,#ffffff2e);color:#fff;transform:translateY(-1px)}.base64-card{position:relative;box-shadow:none!important;-webkit-backdrop-filter:none!important;background:0 0!important;border:none!important;border-radius:0!important;flex-direction:column!important;gap:0!important;display:flex!important;overflow:visible!important}.base64-card:before{display:none!important}.base64-main-grid{z-index:1;background:0 0;flex-direction:row;gap:12px;height:calc(100vh - 210px);min-height:520px;display:flex;position:relative}.base64-main-grid:after{display:none}.base64-editor-container{background:var(--ds-bg-card,#0a0a1273);border:1px solid var(--ds-border,#ffffff14);border-radius:var(--ds-r-xl,18px);-webkit-backdrop-filter:blur(20px);min-width:0;box-shadow:var(--ds-shadow-md);flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.base64-editor-header,.base64-output-header{border-bottom:1px solid var(--ds-border-soft,#ffffff0d);background:#ffffff05;justify-content:space-between;align-items:center;height:42px;min-height:42px;padding:0 16px;display:flex}.base64-editor-label{color:var(--ds-text-muted,#fff9);text-transform:uppercase;letter-spacing:1.5px;padding:0;font-size:11px;font-weight:800}.base64-tags-wrapper{gap:8px;padding-right:0;display:flex}.base64-mime-tag,.base64-ext-tag{letter-spacing:.05em;border-radius:6px;padding:2px 8px;font-size:10px;font-weight:800}.base64-mime-tag{color:var(--ds-accent-light,#34d399);background:#10b9811f;border:1px solid #10b98140}.base64-ext-tag{color:#fff6;background:#ffffff0d;border:1px solid #ffffff1a}.base64-editor-wrapper{background:0 0;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.base64-codemirror-fix{flex:1;height:100%}.cm-editor{background:0 0!important;height:100%!important;font-family:JetBrains Mono,monospace!important}.cm-scroller{overflow:auto!important}.cm-gutters{border-right:1px solid var(--ds-border-soft,#ffffff0d)!important;color:var(--ds-text-faint,#ffffff4d)!important;background:#0a0f1c73!important}.cm-editor .cm-activeLineGutter{color:var(--ds-accent-light,#34d399)!important;background-color:#10b9811f!important}.cm-editor .cm-activeLine{background-color:#ffffff08!important}.cm-content{font-size:13px!important}.base64-format-tabs-wrapper{border-bottom:1px solid var(--ds-border-soft,#ffffff0a);background:#ffffff05;justify-content:space-between;align-items:center;min-height:42px;padding:0 16px;display:flex}.base64-format-tabs{gap:4px;display:flex}.base64-format-tab-btn{color:var(--ds-text-faint,#ffffff59);border-radius:var(--ds-r-sm,6px);cursor:pointer;letter-spacing:.5px;background:0 0;border:none;padding:4px 10px;font-size:10px;font-weight:700;transition:all .2s}.base64-format-tab-btn:hover{color:var(--ds-text,#fff);background:var(--ds-bg-hover,#ffffff0d)}.base64-format-tab-btn.active{background:var(--ds-bg-active,#10b9811a);color:var(--ds-accent-light,#34d399)}.base64-action-buttons{gap:6px;display:flex}.base64-small-action-btn{border-radius:var(--ds-r-md,8px);border:1px solid var(--ds-border,#ffffff14);color:var(--ds-text-muted,#ffffffb3);cursor:pointer;background:#ffffff0a;padding:4px 10px;font-size:11px;font-weight:700;transition:all .2s}.base64-small-action-btn:hover{background:var(--ds-bg-hover,#ffffff14);border-color:var(--ds-border-hover,#ffffff2e);color:#fff}.base64-copy-btn{color:var(--ds-accent-light,#34d399);background:#10b9811f;border-color:#10b98140}.base64-copy-btn:hover{border-color:var(--ds-accent,#10b981);color:#fff;background:#10b98133}.base64-drag-overlay{z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#050508e6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.base64-drag-icon{background:linear-gradient(135deg,#10b981,#059669);border-radius:20px;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 15px;display:flex;box-shadow:0 0 30px #10b9814d}.base64-drag-text{color:#fff;letter-spacing:.1em;font-size:1.1rem;font-weight:800}.base64-decode-overlay{-webkit-backdrop-filter:blur(2px);z-index:10;background:#0000004d;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.base64-download-main-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;border-radius:12px;align-items:center;gap:10px;padding:12px 24px;font-weight:800;transition:all .3s;display:flex;box-shadow:0 10px 20px #0006}.base64-download-main-btn:hover{transform:translateY(-2px);box-shadow:0 15px 30px #10b98133}.base64-preview-card{background:#ffffff03;border-top:1px solid #ffffff0d;flex-direction:column;align-items:stretch;padding:0;display:flex}.base64-preview-label{color:#fff3;text-transform:uppercase;letter-spacing:.15em;border-bottom:1px solid #ffffff08;padding:12px 20px;font-size:.7rem;font-weight:800}.base64-preview-img{border:1px solid #ffffff1a;border-radius:12px;max-width:100%;max-height:500px;box-shadow:0 20px 40px #00000080}.base64-preview-pdf{background:#fff;border:1px solid #ffffff1a;border-radius:12px;width:100%;height:600px;box-shadow:0 20px 40px #00000080}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff0d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff1a}.base64-binary-card{text-align:center;background:#ffffff03;border-top:1px solid #ffffff0d;padding:40px 20px}@media (max-width:850px){.base64-main-grid{grid-template-columns:1fr;height:auto}.base64-main-grid:after{display:none}.base64-editor-container{height:400px}.base64-controls{flex-direction:column;align-items:stretch}.base64-upload-wrapper{margin-left:0}}.hidden{display:none!important}