:root{--base64-codec-primary: #8a2be2;--base64-codec-primary-light: #9d4edd;--base64-codec-primary-dark: #7209b7;--base64-codec-bg: #ffffff;--base64-codec-surface: #f8f9fa;--base64-codec-surface-hover: #e9ecef;--base64-codec-border: #dee2e6;--base64-codec-border-focus: var(--base64-codec-primary);--base64-codec-text-primary: #212529;--base64-codec-text-secondary: #6c757d;--base64-codec-text-muted: #adb5bd;--base64-codec-success: #28a745;--base64-codec-error: #dc3545;--base64-codec-warning: #ffc107;--base64-codec-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--base64-codec-shadow: 0 4px 12px rgba(0, 0, 0, .1);--base64-codec-shadow-lg: 0 8px 25px rgba(0, 0, 0, .12);--base64-codec-radius-sm: 6px;--base64-codec-radius: 8px;--base64-codec-radius-lg: 12px;--base64-codec-spacing-xs: 4px;--base64-codec-spacing-sm: 8px;--base64-codec-spacing: 12px;--base64-codec-spacing-lg: 16px;--base64-codec-spacing-xl: 20px;--base64-codec-spacing-xxl: 24px;--base64-codec-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--base64-codec-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--base64-codec-transition: all .2s ease-in-out;--base64-codec-transition-fast: all .15s ease-in-out}@media (prefers-color-scheme: dark){:root{--base64-codec-primary: #9370db;--base64-codec-primary-light: #a78bfa;--base64-codec-primary-dark: #8b5cf6;--base64-codec-bg: #0d1117;--base64-codec-surface: #161b22;--base64-codec-surface-hover: #21262d;--base64-codec-border: #30363d;--base64-codec-border-focus: var(--base64-codec-primary);--base64-codec-text-primary: #c9d1d9;--base64-codec-text-secondary: #8b949e;--base64-codec-text-muted: #7d8590;--base64-codec-success: #3fb950;--base64-codec-error: #f85149;--base64-codec-warning: #d29922;--base64-codec-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--base64-codec-shadow: 0 4px 12px rgba(0, 0, 0, .4);--base64-codec-shadow-lg: 0 8px 25px rgba(0, 0, 0, .5)}}.base64-codec-app *{box-sizing:border-box;margin:0;padding:0}.base64-codec-app{font-family:var(--base64-codec-font-family);background-color:var(--base64-codec-bg);color:var(--base64-codec-text-primary);padding:var(--base64-codec-spacing-lg);line-height:1.5;display:flex;justify-content:center}.base64-codec-container{max-width:600px;width:100%;background-color:var(--base64-codec-surface);border-radius:var(--base64-codec-radius-lg);box-shadow:var(--base64-codec-shadow-lg);overflow:hidden;transition:var(--base64-codec-transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.base64-codec-header{text-align:center;padding:var(--base64-codec-spacing-xl) var(--base64-codec-spacing-lg);background:linear-gradient(135deg,var(--base64-codec-primary),var(--base64-codec-primary-light));color:#fff;position:relative;overflow:hidden}.base64-codec-header:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);animation:base64-codec-pulse 6s ease-in-out infinite}.base64-codec-title{font-size:1.5rem;font-weight:600;margin-bottom:var(--base64-codec-spacing-xs);display:flex;align-items:center;justify-content:center;gap:var(--base64-codec-spacing-sm);position:relative;z-index:1}.base64-codec-subtitle{font-size:.85rem;opacity:.85;font-weight:400;position:relative;z-index:1}.base64-codec-main{padding:var(--base64-codec-spacing-lg)}.base64-codec-tabs{display:flex;gap:var(--base64-codec-spacing-xs);margin-bottom:var(--base64-codec-spacing-lg);background-color:var(--base64-codec-bg);padding:4px;border-radius:var(--base64-codec-radius);border:1px solid var(--base64-codec-border);box-shadow:inset 0 1px 3px #0000000d}.base64-codec-tab{flex:1;padding:var(--base64-codec-spacing-sm) var(--base64-codec-spacing);border:none;background:transparent;color:var(--base64-codec-text-secondary);border-radius:var(--base64-codec-radius-sm);cursor:pointer;transition:var(--base64-codec-transition);font-family:inherit;font-size:.875rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--base64-codec-spacing-xs);position:relative;overflow:hidden}.base64-codec-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:var(--base64-codec-transition)}.base64-codec-tab:hover:before{left:100%}.base64-codec-tab:hover{color:var(--base64-codec-text-primary);background-color:var(--base64-codec-surface-hover)}.base64-codec-tab--active{background:linear-gradient(135deg,var(--base64-codec-primary),var(--base64-codec-primary-light));color:#fff;box-shadow:var(--base64-codec-shadow-sm);transform:translateY(-1px)}.base64-codec-tab-icon{font-size:1rem}.base64-codec-processor{display:flex;flex-direction:column;gap:var(--base64-codec-spacing)}.base64-codec-input-section,.base64-codec-output-section{display:flex;flex-direction:column;gap:var(--base64-codec-spacing-sm)}.base64-codec-output-header{display:flex;justify-content:space-between;align-items:center}.base64-codec-label{font-weight:600;color:var(--base64-codec-text-primary);font-size:.875rem;position:relative}.base64-codec-label:after{content:"";position:absolute;bottom:-2px;left:0;width:20px;height:2px;background:linear-gradient(90deg,var(--base64-codec-primary),transparent);border-radius:1px}.base64-codec-textarea{width:100%;min-height:100px;padding:var(--base64-codec-spacing);border:1px solid var(--base64-codec-border);border-radius:var(--base64-codec-radius);background-color:var(--base64-codec-bg);color:var(--base64-codec-text-primary);font-family:var(--base64-codec-font-mono);font-size:.875rem;line-height:1.4;resize:vertical;transition:var(--base64-codec-transition)}.base64-codec-textarea:focus{outline:none;border-color:var(--base64-codec-border-focus);box-shadow:0 0 0 2px #8a2be21a;transform:translateY(-1px)}.base64-codec-textarea--readonly{background-color:var(--base64-codec-surface);cursor:default}.base64-codec-textarea--error{border-color:var(--base64-codec-error);color:var(--base64-codec-error);background-color:#dc35450d}.base64-codec-textarea::placeholder{color:var(--base64-codec-text-muted)}.base64-codec-arrow{display:flex;justify-content:center;align-items:center;margin:var(--base64-codec-spacing-xs) 0}.base64-codec-arrow-icon{font-size:1.2rem;color:var(--base64-codec-primary);animation:base64-codec-bounce 3s ease-in-out infinite;background:#8a2be21a;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.base64-codec-actions{display:flex;justify-content:center;margin-top:var(--base64-codec-spacing-sm)}.base64-codec-btn{padding:var(--base64-codec-spacing-sm) var(--base64-codec-spacing);border:1px solid var(--base64-codec-border);border-radius:var(--base64-codec-radius);background-color:var(--base64-codec-bg);color:var(--base64-codec-text-primary);font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--base64-codec-transition);display:flex;align-items:center;gap:var(--base64-codec-spacing-xs);position:relative;overflow:hidden}.base64-codec-btn:hover:not(:disabled){border-color:var(--base64-codec-primary);color:var(--base64-codec-primary);transform:translateY(-1px);box-shadow:var(--base64-codec-shadow-sm)}.base64-codec-btn:active:not(:disabled){transform:translateY(0)}.base64-codec-btn:disabled{opacity:.5;cursor:not-allowed}.base64-codec-btn--clear{border-color:var(--base64-codec-error);color:var(--base64-codec-error)}.base64-codec-btn--clear:hover:not(:disabled){background-color:var(--base64-codec-error);color:#fff}.base64-codec-copy-btn{padding:var(--base64-codec-spacing-xs) var(--base64-codec-spacing-sm);border:1px solid var(--base64-codec-primary);border-radius:var(--base64-codec-radius-sm);background:linear-gradient(135deg,var(--base64-codec-primary),var(--base64-codec-primary-light));color:#fff;font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:var(--base64-codec-transition);display:flex;align-items:center;gap:var(--base64-codec-spacing-xs);position:relative;overflow:hidden}.base64-codec-copy-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:var(--base64-codec-transition)}.base64-codec-copy-btn:hover:not(:disabled):before{left:100%}.base64-codec-copy-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--base64-codec-shadow)}.base64-codec-copy-btn:active:not(:disabled){transform:translateY(0)}.base64-codec-copy-btn--disabled{opacity:.5;cursor:not-allowed;background:var(--base64-codec-text-muted);border-color:var(--base64-codec-text-muted)}.base64-codec-copy-btn--success{background:linear-gradient(135deg,var(--base64-codec-success),#20c997);border-color:var(--base64-codec-success)}.base64-codec-copy-icon{font-size:.8rem}@keyframes base64-codec-pulse{0%,to{transform:scale(1);opacity:.08}50%{transform:scale(1.05);opacity:.12}}@keyframes base64-codec-bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-2px)}}@media (max-width: 768px){.base64-codec-app{padding:var(--base64-codec-spacing);align-items:flex-start;padding-top:var(--base64-codec-spacing-xl)}.base64-codec-container{border-radius:var(--base64-codec-radius);max-width:none}.base64-codec-header{padding:var(--base64-codec-spacing-lg) var(--base64-codec-spacing)}.base64-codec-title{font-size:1.25rem}.base64-codec-main{padding:var(--base64-codec-spacing)}.base64-codec-textarea{min-height:80px;font-size:.8rem}.base64-codec-output-header{flex-direction:column;align-items:flex-start;gap:var(--base64-codec-spacing-sm)}.base64-codec-copy-btn{width:auto;min-width:80px;max-width:120px;justify-content:center;padding:var(--base64-codec-spacing-xs) var(--base64-codec-spacing-sm);font-size:.75rem;min-height:28px;border-radius:var(--base64-codec-radius-sm);font-weight:600;letter-spacing:.02em;box-shadow:var(--base64-codec-shadow-sm)}.base64-codec-copy-icon{font-size:.7rem}.base64-codec-output-header{align-items:center}}@media (max-width: 480px){.base64-codec-header{padding:var(--base64-codec-spacing) var(--base64-codec-spacing-sm)}.base64-codec-title{font-size:1.125rem;flex-direction:column;gap:var(--base64-codec-spacing-xs)}.base64-codec-subtitle{font-size:.8rem}.base64-codec-main{padding:var(--base64-codec-spacing-sm)}.base64-codec-textarea{min-height:70px;padding:var(--base64-codec-spacing-sm)}.base64-codec-copy-btn{min-width:85px;max-width:130px;padding:var(--base64-codec-spacing-sm) var(--base64-codec-spacing);font-size:.8rem;min-height:30px;border-radius:var(--base64-codec-radius-sm);font-weight:600;letter-spacing:.01em}.base64-codec-copy-icon{font-size:.75rem}.base64-codec-output-header{gap:var(--base64-codec-spacing);align-items:center}}