.tool-ui{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);margin-bottom:var(--space-8);overflow:hidden;padding:22px}.url-tool,.url-tool *{box-sizing:border-box}.url-tool{display:grid;gap:12px 14px;grid-template-areas:"mode action-mode" "input output" "actions actions" "options options" "info info";grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0}.mode-selector{grid-area:mode}.encode-decode-toggle{grid-area:action-mode}.encode-decode-toggle,.mode-selector{align-items:center;display:flex}.encode-decode-toggle{justify-content:flex-end}.mode-tabs,.toggle-wrapper{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:14px;display:inline-flex;gap:4px;isolation:isolate;padding:4px;position:relative}.mode-tab,.toggle-label{align-items:center;background:transparent;border:0;border-radius:10px;color:var(--color-text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-body);font-size:var(--text-sm);font-weight:650;gap:7px;justify-content:center;min-height:40px;padding:8px 16px;position:relative;transition:color .2s ease;white-space:nowrap;z-index:2}.mode-tab.active,.toggle-wrapper input:checked+.toggle-label{color:#fff}.mode-tab svg,.url-tool .btn svg{fill:none;flex:0 0 auto;height:18px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:18px}.mode-indicator,.toggle-slider{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-radius:10px;box-shadow:0 5px 14px rgba(79,70,229,.24);height:calc(100% - 8px);left:4px;position:absolute;top:4px;transition:left .25s ease,width .25s ease;z-index:1}.mode-indicator{width:calc(50% - 6px)}.toggle-slider{width:calc(50% - 4px)}.toggle-wrapper input{opacity:0;pointer-events:none;position:absolute}.input-section,.output-section{display:flex;flex-direction:column;gap:7px;min-width:0}.input-section{grid-area:input}.output-section{grid-area:output}.input-label{align-items:center;color:var(--color-text-secondary);display:flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:10px;justify-content:space-between}.input-label span{color:var(--color-text-muted);font-family:var(--font-mono);font-size:11px;font-weight:500}.textarea-wrapper{background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:14px;min-width:0;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}.textarea-wrapper:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}.url-input,.url-output{background:var(--color-bg);border:0;color:var(--color-text);display:block;font-family:var(--font-mono);font-size:13px;height:220px;line-height:1.65;min-width:0;outline:0;overflow:auto;overflow-wrap:anywhere;padding:14px 15px;resize:none;width:100%}.url-output{background:var(--color-bg-secondary)}.url-input::placeholder,.url-output::placeholder{color:var(--color-text-muted)}.action-bar{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:14px;display:flex;gap:8px;grid-area:actions;min-width:0;padding:10px}.action-bar,.url-tool .btn{align-items:center;justify-content:center}.url-tool .btn{background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:11px;color:var(--color-text-secondary);cursor:pointer;display:inline-flex;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-semibold);gap:7px;min-height:40px;padding:8px 14px;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease;white-space:nowrap}.url-tool .btn:hover:not(:disabled){border-color:#a5b4fc;color:#4f46e5;transform:translateY(-1px)}.url-tool .btn-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 7px 16px rgba(79,70,229,.2)}.url-tool .btn-primary,.url-tool .btn-primary:hover:not(:disabled){border-color:transparent;color:#fff}.url-tool .btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-muted)}.url-tool .btn-success{background:#059669!important;border-color:#059669!important;color:#fff!important}.url-tool .btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.42;transform:none}.url-options{align-items:center;display:flex;gap:16px;grid-area:options;min-height:30px}.compact-option{align-items:center;color:var(--color-text-secondary);cursor:pointer;display:inline-flex;font-size:12px;gap:7px;white-space:nowrap}.compact-option input{opacity:0;pointer-events:none;position:absolute}.compact-option>span{background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:5px;display:grid;height:17px;place-items:center;width:17px}.compact-option input:checked+span{background:#4f46e5;border-color:#4f46e5}.compact-option input:checked+span:after{color:#fff;content:"✓";font-size:11px;font-weight:800}.compact-option.is-disabled{cursor:not-allowed;opacity:.42}.url-status{color:var(--color-text-muted);flex:1;font-size:12px;min-width:0;text-align:right}.url-status.is-success{color:#047857}.url-status.is-error{color:#dc2626}.url-info{display:grid;gap:10px;grid-area:info;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.info-card{align-items:flex-start;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:13px;display:flex;gap:10px;min-width:0;padding:11px 12px}.info-icon{background:#eef2ff;border-radius:10px;color:#4f46e5;display:grid;flex:0 0 34px;height:34px;place-items:center;width:34px}.info-icon svg{height:17px;width:17px}.info-content{min-width:0}.info-content h4{color:var(--color-text);font-size:12px;font-weight:700;margin:0 0 2px}.info-content p{color:var(--color-text-muted);font-size:11px;line-height:1.5;margin:0}@media (max-width:760px){.tool-ui{padding:14px 10px}.url-tool{gap:10px;grid-template-areas:"mode" "action-mode" "input" "output" "actions" "options" "info";grid-template-columns:1fr}.encode-decode-toggle,.mode-selector{justify-content:center}.mode-tabs,.toggle-wrapper{width:100%}.mode-tab,.toggle-label{flex:1;padding-inline:10px}.url-input,.url-output{height:175px}.action-bar{justify-content:flex-start;overflow-x:auto;padding:8px;scrollbar-width:thin}.action-bar .btn{flex:0 0 auto}.url-options{align-items:flex-start;flex-wrap:wrap;gap:9px 14px}.url-status{flex-basis:100%;text-align:left}.url-info{grid-template-columns:1fr}}@media (max-width:420px){.mode-tab{font-size:12px}.url-input,.url-output{font-size:12px;height:155px;padding:12px}.compact-option{white-space:normal}}