.url-codec-tool[data-v-84b2d589]{width:100%;margin:0 auto}.control-section[data-v-84b2d589]{background:#fff;border-radius:6px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #0000000f}.section-title[data-v-84b2d589]{font-size:18px;font-weight:600;color:#374151;margin-bottom:20px;display:flex;align-items:center}.section-title i[data-v-84b2d589]{color:#23a894}.mr-2[data-v-84b2d589]{margin-right:8px}.mode-tabs[data-v-84b2d589]{display:flex;gap:0;margin-bottom:20px;border:1px solid #dcdfe6;border-radius:3px;overflow:hidden;width:fit-content}.mode-tab[data-v-84b2d589]{padding:8px 20px;border:none;background:#fff;color:#606266;cursor:pointer;font-size:14px;transition:all .3s}.mode-tab[data-v-84b2d589]:first-child{border-right:1px solid #dcdfe6}.mode-tab[data-v-84b2d589]:hover{color:#23a894}.mode-tab.active[data-v-84b2d589]{background:#23a894;color:#fff}.input-label[data-v-84b2d589]{display:block;font-size:14px;color:#6b7280;font-weight:500;margin-bottom:8px}.codec-textarea[data-v-84b2d589]{width:100%;padding:14px;border:1px solid #dcdfe6;border-radius:6px;font-family:Courier New,Consolas,monospace;font-size:14px;line-height:1.6;resize:vertical;outline:none;transition:border-color .3s;box-sizing:border-box}.codec-textarea[data-v-84b2d589]:focus{border-color:#23a894}.action-buttons[data-v-84b2d589]{display:flex;gap:12px;justify-content:center;padding-top:16px;border-top:1px solid #e5e7eb;margin-top:16px;flex-wrap:wrap}.btn[data-v-84b2d589]{padding:10px 20px;border:1px solid #dcdfe6;border-radius:3px;background:#fff;color:#606266;cursor:pointer;font-size:14px;transition:all .3s;display:inline-flex;align-items:center;gap:6px}.btn[data-v-84b2d589]:hover:not(:disabled){color:#23a894;border-color:#23a894}.btn[data-v-84b2d589]:disabled{opacity:.5;cursor:not-allowed}.btn-primary[data-v-84b2d589]{background:#23a894;color:#fff;border-color:#23a894}.btn-primary[data-v-84b2d589]:hover:not(:disabled){background:#1f8f7d;border-color:#1f8f7d;color:#fff}.result-section[data-v-84b2d589]{background:#fff;border-radius:6px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #0000000f;min-height:160px}.stats-badge[data-v-84b2d589]{font-size:13px;font-weight:400;color:#23a894;margin-left:12px}.empty-state[data-v-84b2d589]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:140px;color:#9ca3af}.empty-state i[data-v-84b2d589]{font-size:40px;margin-bottom:12px}.error-block[data-v-84b2d589]{background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:12px 16px;color:#dc2626;font-size:14px;margin-bottom:16px;display:flex;align-items:flex-start;gap:8px}.output-area[data-v-84b2d589]{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:16px;margin:0;font-family:Courier New,Consolas,monospace;font-size:14px;line-height:1.6;color:#1f2937;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:400px;overflow-y:auto}.output-area code[data-v-84b2d589]{font-family:inherit;font-size:inherit}.help-section[data-v-84b2d589]{background:#fff;border-radius:6px;padding:24px;box-shadow:0 2px 8px #0000000f}.help-content[data-v-84b2d589]{display:grid;gap:12px}.help-item[data-v-84b2d589]{display:flex;align-items:flex-start;gap:12px;padding:12px;background:#f9fafb;border-radius:6px}.help-item i[data-v-84b2d589]{color:#23a894;font-size:16px;margin-top:2px;flex-shrink:0}.help-item div[data-v-84b2d589]{font-size:14px;color:#6b7280;line-height:1.6}.help-item strong[data-v-84b2d589]{color:#374151}@media (max-width: 640px){.mode-tabs[data-v-84b2d589]{width:100%}.mode-tab[data-v-84b2d589]{flex:1;text-align:center}.action-buttons[data-v-84b2d589]{flex-direction:column}.action-buttons button[data-v-84b2d589]{width:100%}}