.tm-base64-encoder-decoder{display:block;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-surface);box-shadow:var(--shadow-premium);padding:clamp(var(--space-5),3vw,var(--space-8));margin-bottom:var(--space-10)}.tm-base64-encoder-decoder__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tm-base64-encoder-decoder__mode-bar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);flex-wrap:wrap}.tm-base64-encoder-decoder__mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-panel);overflow:hidden}.tm-base64-encoder-decoder__mode-toggle button{padding:var(--space-2) var(--space-5);border:none;background:transparent;font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-muted);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);min-height:36px}.tm-base64-encoder-decoder__mode-toggle button.is-active{background:var(--accent-primary);color:var(--fg-on-accent);border-radius:var(--radius-full)}.tm-base64-encoder-decoder__mode-toggle button:not(.is-active):hover{background:var(--hover-overlay);color:var(--fg-body)}.tm-base64-encoder-decoder__mode-toggle button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;border-radius:var(--radius-full)}.tm-base64-encoder-decoder__privacy{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1_5) var(--space-3);border-radius:var(--radius-full);background:var(--color-success-subtle);border:1px solid color-mix(in srgb,var(--color-success) 30%,var(--border));font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-success)}.tm-base64-encoder-decoder__privacy svg{flex-shrink:0}.tm-base64-encoder-decoder__hint{display:inline-flex;align-items:center;gap:var(--space-1_5);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-info-subtle);border:1px solid color-mix(in srgb,var(--color-info) 30%,transparent);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-info)}.tm-base64-encoder-decoder__options{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)}.tm-base64-encoder-decoder__option-group{display:flex;align-items:center;gap:var(--space-2)}.tm-base64-encoder-decoder__option-group>label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--fg-muted);text-transform:uppercase;letter-spacing:var(--tracking-caps)}.tm-base64-encoder-decoder__pill-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-full);overflow:hidden;background:var(--bg-surface)}.tm-base64-encoder-decoder__pill-toggle button{padding:var(--space-1_5) var(--space-3);border:none;background:transparent;font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--fg-muted);cursor:pointer;transition:background var(--duration-fast),color var(--duration-fast);min-height:32px}.tm-base64-encoder-decoder__pill-toggle button.is-active{background:var(--accent-primary-subtle);color:var(--accent-primary);font-weight:var(--weight-bold)}.tm-base64-encoder-decoder__pill-toggle button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px}.tm-base64-encoder-decoder__panes{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;margin-bottom:var(--space-4)}@media(max-width:780px){.tm-base64-encoder-decoder__panes{grid-template-columns:1fr;gap:var(--space-3)}.tm-base64-encoder-decoder__swap-col{order:-1}}.tm-base64-encoder-decoder__pane{display:flex;flex-direction:column}.tm-base64-encoder-decoder__pane-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.tm-base64-encoder-decoder__pane-label{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--fg-body)}.tm-base64-encoder-decoder__pane-actions{display:flex;gap:var(--space-1_5)}.tm-base64-encoder-decoder__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--fg-muted);cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast)}.tm-base64-encoder-decoder__icon-btn:hover{background:var(--accent-primary-subtle);border-color:var(--accent-primary);color:var(--accent-primary)}.tm-base64-encoder-decoder__icon-btn.is-copied{background:var(--color-success-subtle);border-color:var(--color-success);color:var(--color-success)}.tm-base64-encoder-decoder__icon-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-base64-encoder-decoder__textarea{flex:1;min-height:200px;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel);color:var(--fg-body);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--leading-normal);resize:vertical;transition:border-color var(--duration-fast),box-shadow var(--duration-fast);width:100%;box-sizing:border-box}.tm-base64-encoder-decoder__textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.tm-base64-encoder-decoder__textarea.has-error{border-color:var(--color-danger);box-shadow:var(--focus-ring-danger)}.tm-base64-encoder-decoder__textarea::placeholder{color:var(--fg-muted);opacity:.6}.tm-base64-encoder-decoder__counters{display:flex;gap:var(--space-3);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--fg-muted)}.tm-base64-encoder-decoder__counters span{font-weight:var(--weight-medium)}.tm-base64-encoder-decoder__swap-col{display:flex;align-items:center;justify-content:center;padding:0 var(--space-3)}.tm-base64-encoder-decoder__swap-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-surface);color:var(--fg-muted);cursor:pointer;transition:background var(--duration-fast),transform var(--duration-fast),border-color var(--duration-fast)}.tm-base64-encoder-decoder__swap-btn:hover{background:var(--accent-primary-subtle);border-color:var(--accent-primary);color:var(--accent-primary);transform:rotate(180deg)}.tm-base64-encoder-decoder__swap-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-base64-encoder-decoder__error{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:var(--color-danger-subtle);border:1px solid color-mix(in srgb,var(--color-danger) 30%,var(--border));margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--color-danger);font-weight:var(--weight-medium)}.tm-base64-encoder-decoder__error svg{flex-shrink:0;margin-top:2px}.tm-base64-encoder-decoder__note{padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4);border-radius:var(--radius-sm);background:var(--color-warning-subtle);color:var(--color-warning);font-size:var(--text-sm);line-height:1.4}.tm-base64-encoder-decoder__convert-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.tm-base64-encoder-decoder__convert-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border:1px solid var(--accent-primary);border-radius:var(--radius-full);background:var(--accent-primary);color:var(--fg-on-accent);font-size:var(--text-sm);font-weight:var(--weight-bold);cursor:pointer;box-shadow:var(--shadow-soft);transition:background var(--duration-fast),transform var(--duration-fast),box-shadow var(--duration-fast);min-height:40px}.tm-base64-encoder-decoder__convert-btn:hover{background:var(--accent-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-lift)}.tm-base64-encoder-decoder__convert-btn:active{background:var(--accent-primary-active);transform:translateY(0)}.tm-base64-encoder-decoder__convert-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px}.tm-base64-encoder-decoder__shortcut-hint{font-size:var(--text-xs);color:var(--fg-muted)}.tm-base64-encoder-decoder__advanced-toggle{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-5);padding:var(--space-2) var(--space-3);border:none;background:transparent;font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--duration-fast)}.tm-base64-encoder-decoder__advanced-toggle:hover{color:var(--accent-primary)}.tm-base64-encoder-decoder__advanced-toggle svg{transition:transform var(--duration-fast)}.tm-base64-encoder-decoder__advanced-toggle.is-open svg{transform:rotate(180deg)}.tm-base64-encoder-decoder__advanced-toggle:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-base64-encoder-decoder__advanced-panel{margin-top:var(--space-3);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel)}.tm-base64-encoder-decoder__advanced-panel[hidden]{display:none}.tm-base64-encoder-decoder__advanced-panel label{display:block;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-body)}.tm-base64-encoder-decoder__advanced-panel select{width:100%;max-width:240px;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--fg-body);font:inherit;font-size:var(--text-sm)}.tm-base64-encoder-decoder__advanced-panel select:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-base64-encoder-decoder__advanced-help{margin:var(--space-2) 0 0;max-width:44rem;font-size:var(--text-sm);line-height:1.5;color:var(--fg-muted)}.tm-base64-encoder-decoder__examples{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border)}.tm-base64-encoder-decoder__examples-title{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--fg-body);margin-bottom:var(--space-3)}.tm-base64-encoder-decoder__examples-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.tm-base64-encoder-decoder__example-btn{padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-surface);font:inherit;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--fg-muted);cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast)}.tm-base64-encoder-decoder__example-btn:hover{background:var(--accent-primary-subtle);border-color:var(--accent-primary);color:var(--accent-primary)}.tm-base64-encoder-decoder__example-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}