.tm-url-encoder-decoder{display:block;position:relative;background:radial-gradient(circle at 100% 0,var(--accent-primary-subtle),transparent 36%),var(--bg-surface);border:1px solid color-mix(in srgb,var(--accent-primary) 20%,var(--border));border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);padding:var(--space-6);margin-bottom:var(--space-8);container-type:inline-size}@media(max-width:640px){.tm-url-encoder-decoder{padding:var(--space-4)}}.tm-url-encoder-decoder__live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tm-url-encoder-decoder__controls{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}.tm-url-encoder-decoder__direction{display:inline-flex;gap:var(--space-1);padding:4px;border:1px solid color-mix(in srgb,var(--accent-primary) 20%,var(--border));border-radius:var(--radius-full);background:color-mix(in srgb,var(--bg-panel) 80%,var(--bg-surface))}.tm-url-encoder-decoder__direction-btn{padding:var(--space-2) var(--space-5);border:none;background:none;border-radius:var(--radius-full);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:40px;min-width:88px}.tm-url-encoder-decoder__direction-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-url-encoder-decoder__direction-btn[aria-pressed=true]{color:var(--fg-on-accent);background:var(--accent-primary);box-shadow:var(--shadow-soft)}.tm-url-encoder-decoder__direction-btn[aria-pressed=true]:hover{background:var(--accent-primary-hover)}.tm-url-encoder-decoder__direction-btn[aria-pressed=false]:hover{background:var(--hover-overlay);color:var(--fg-body)}.tm-url-encoder-decoder__mode{display:inline-flex;gap:var(--space-1);padding:4px;border:1px solid var(--border);border-radius:var(--radius-full);background:color-mix(in srgb,var(--bg-panel) 80%,var(--bg-surface))}.tm-url-encoder-decoder__mode[aria-disabled=true]{opacity:.55}.tm-url-encoder-decoder__mode-btn{padding:var(--space-2) var(--space-4);border:none;background:none;border-radius:var(--radius-full);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--fg-muted);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);min-height:40px}.tm-url-encoder-decoder__mode-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-url-encoder-decoder__mode-btn:disabled{cursor:not-allowed;pointer-events:none}.tm-url-encoder-decoder__mode-btn[aria-pressed=true]{color:var(--fg-body);background:var(--bg-surface);box-shadow:var(--shadow-soft);font-weight:var(--weight-semibold)}.tm-url-encoder-decoder__mode-btn[aria-pressed=false]:not(:disabled):hover{background:var(--hover-overlay);color:var(--fg-body)}.tm-url-encoder-decoder__explainer{font-size:var(--text-sm);color:var(--fg-muted);margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--bg-panel);border-radius:var(--radius-md);border-left:3px solid var(--accent-primary);line-height:var(--leading-relaxed)}.tm-url-encoder-decoder__explainer strong{color:var(--fg-body);margin-right:var(--space-1)}.tm-url-encoder-decoder__explainer code{font-family:var(--font-mono);font-size:var(--text-xs);padding:2px 6px;background:var(--bg-code);border-radius:var(--radius-xs);color:var(--fg-body);word-break:break-all}.tm-url-encoder-decoder__hint{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);flex-wrap:wrap}.tm-url-encoder-decoder__hint--warning{background:var(--color-warning-subtle);color:var(--color-warning);border:1px solid color-mix(in srgb,var(--color-warning) 20%,transparent)}.tm-url-encoder-decoder__hint--info{background:var(--color-info-subtle);color:var(--color-info);border:1px solid color-mix(in srgb,var(--color-info) 20%,transparent)}.tm-url-encoder-decoder__hint-text{flex:1 1 auto;min-width:0}.tm-url-encoder-decoder__hint-action{margin-left:auto;padding:var(--space-1) var(--space-3);border:1px solid currentColor;border-radius:var(--radius-full);background:none;color:inherit;font:inherit;font-size:var(--text-xs);font-weight:var(--weight-semibold);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast),color var(--duration-fast);min-height:32px}.tm-url-encoder-decoder__hint-action:hover{background:currentColor;color:var(--bg-surface)}.tm-url-encoder-decoder__hint-action:focus-visible{outline:2px solid currentColor;outline-offset:2px}.tm-url-encoder-decoder__hint-dismiss{background:none;border:none;color:inherit;cursor:pointer;font-size:var(--text-lg);line-height:1;opacity:.6;padding:0 var(--space-1);min-width:28px;min-height:28px}.tm-url-encoder-decoder__hint-dismiss:hover{opacity:1}.tm-url-encoder-decoder__hint-dismiss:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:var(--radius-xs)}.tm-url-encoder-decoder__panes{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-3);align-items:stretch}@media(max-width:768px){.tm-url-encoder-decoder__panes{grid-template-columns:1fr;gap:var(--space-2)}}.tm-url-encoder-decoder__pane{display:flex;flex-direction:column;min-width:0}.tm-url-encoder-decoder__pane-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2);gap:var(--space-2)}.tm-url-encoder-decoder__pane-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-body);text-transform:uppercase;letter-spacing:.05em}.tm-url-encoder-decoder__pane-actions{display:flex;gap:var(--space-1);flex-wrap:wrap}.tm-url-encoder-decoder__textarea{width:100%;min-height:200px;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);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)}.tm-url-encoder-decoder__textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.tm-url-encoder-decoder__textarea::placeholder{color:var(--fg-muted)}.tm-url-encoder-decoder__textarea[readonly]{background:var(--bg-panel);cursor:default}[data-theme=dark] .tm-url-encoder-decoder__textarea{background:var(--bg-code)}[data-theme=dark] .tm-url-encoder-decoder__textarea[readonly]{background:var(--bg-panel)}.tm-url-encoder-decoder__manual-hint{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--fg-muted)}.tm-url-encoder-decoder__divider{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4) var(--space-2)}@media(max-width:768px){.tm-url-encoder-decoder__divider{flex-direction:row;padding:var(--space-2) 0;justify-content:center}}.tm-url-encoder-decoder__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--radius-lg);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast),box-shadow var(--duration-fast),transform var(--duration-fast);white-space:nowrap}.tm-url-encoder-decoder__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-url-encoder-decoder__btn:disabled{opacity:.55;cursor:not-allowed}.tm-url-encoder-decoder__btn--primary{background:var(--accent-primary);color:var(--fg-on-accent);box-shadow:var(--shadow-soft)}.tm-url-encoder-decoder__btn--primary:hover:not(:disabled){background:var(--accent-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-lift)}.tm-url-encoder-decoder__btn--primary:active:not(:disabled){transform:none;box-shadow:var(--shadow-soft)}.tm-url-encoder-decoder__btn--ghost{background:transparent;color:var(--fg-muted);border:1px solid var(--border)}.tm-url-encoder-decoder__btn--ghost:hover:not(:disabled){background:var(--hover-overlay);color:var(--fg-body);border-color:color-mix(in srgb,var(--fg-muted) 40%,var(--border))}.tm-url-encoder-decoder__btn--icon{padding:0;min-width:44px;min-height:44px;border-radius:var(--radius-md)}.tm-url-encoder-decoder__btn--sm{min-height:36px;padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-md)}.tm-url-encoder-decoder__error{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin-top:var(--space-3);border-radius:var(--radius-md);background:var(--color-danger-subtle);color:var(--color-danger);font-size:var(--text-sm);font-weight:var(--weight-medium);border:1px solid color-mix(in srgb,var(--color-danger) 20%,transparent)}.tm-url-encoder-decoder__error svg{flex-shrink:0;margin-top:2px}.tm-url-encoder-decoder__convert-row{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap}.tm-url-encoder-decoder__shortcuts{display:flex;gap:var(--space-4);align-items:center;font-size:var(--text-xs);color:var(--fg-muted);flex-wrap:wrap}@media(max-width:640px){.tm-url-encoder-decoder__shortcuts{display:none}}.tm-url-encoder-decoder__shortcuts kbd{display:inline-flex;align-items:center;padding:2px 6px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:11px;line-height:1;color:var(--fg-body)}.tm-url-encoder-decoder__toast{position:fixed;bottom:var(--space-8);left:50%;transform:translate(-50%);padding:var(--space-3) var(--space-5);background:var(--color-success);color:#fff;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-semibold);box-shadow:var(--shadow-lift);z-index:500;pointer-events:none}