.encoding-tool[data-v-40fe1683]{min-height:100vh;background:#f2f2f7}.page-header[data-v-40fe1683]{padding:60px 0 40px;text-align:center;color:#000}.header-content h1[data-v-40fe1683]{font-size:2.5rem;font-weight:800;margin:0 0 16px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.header-content p[data-v-40fe1683]{font-size:1.1rem;opacity:.9;margin:0}.tool-container[data-v-40fe1683]{padding:0 0 60px}.container[data-v-40fe1683]{max-width:1400px;margin:0 auto;padding:0 20px}.tool-layout[data-v-40fe1683]{display:grid;grid-template-columns:300px 1fr 280px;gap:30px;background:#fff;border-radius:16px;padding:30px;box-shadow:0 2px 16px #00000014}.method-selector[data-v-40fe1683]{border-right:1px solid #f0f0f0;padding-right:20px}.selector-header h3[data-v-40fe1683]{margin:0 0 20px;color:#333;font-size:1.2rem}.category-tabs[data-v-40fe1683]{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.category-tab[data-v-40fe1683]{padding:12px 16px;border:1px solid #e0e0e0;background:#fff;color:#666;border-radius:8px;cursor:pointer;transition:all .3s ease;text-align:left;font-size:.9rem}.category-tab[data-v-40fe1683]:hover{border-color:#667eea;color:#667eea}.category-tab.active[data-v-40fe1683]{background:#667eea;color:#000;border-color:#667eea}.method-list[data-v-40fe1683]{max-height:500px;overflow-y:auto}.method-item[data-v-40fe1683]{display:flex;align-items:center;padding:12px;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-bottom:8px}.method-item[data-v-40fe1683]:hover{background:#f8f9fa}.method-item.active[data-v-40fe1683]{background:#e6f3ff;border:1px solid #667eea}.method-icon[data-v-40fe1683]{font-size:1.5rem;margin-right:12px}.method-info[data-v-40fe1683]{flex:1}.method-name[data-v-40fe1683]{font-weight:600;color:#333;margin-bottom:4px}.method-desc[data-v-40fe1683]{font-size:.8rem;color:#666;line-height:1.4}.encoding-area[data-v-40fe1683]{display:flex;flex-direction:column;gap:20px}.section-header[data-v-40fe1683]{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-header h4[data-v-40fe1683]{margin:0;color:#333;font-size:1.1rem}.input-actions[data-v-40fe1683],.output-actions[data-v-40fe1683]{display:flex;gap:8px}.action-btn[data-v-40fe1683]{padding:6px 12px;border:1px solid #e0e0e0;background:#fff;color:#666;border-radius:6px;cursor:pointer;font-size:.8rem;transition:all .3s ease}.action-btn[data-v-40fe1683]:hover{border-color:#667eea;color:#667eea}.text-input[data-v-40fe1683]{width:100%;padding:16px;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;line-height:1.6;resize:vertical;min-height:120px;font-family:Monaco,Menlo,Ubuntu Mono,monospace}.text-input[data-v-40fe1683]:focus{outline:none;border-color:#667eea}.action-section[data-v-40fe1683]{display:flex;flex-direction:column;gap:16px}.action-buttons[data-v-40fe1683]{display:flex;gap:16px;justify-content:center}.encode-btn[data-v-40fe1683],.decode-btn[data-v-40fe1683]{display:flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:120px;justify-content:center}.encode-btn[data-v-40fe1683]{background:#667eea;color:#000}.encode-btn[data-v-40fe1683]:hover:not(:disabled){background:#5a6fd8;transform:translateY(-2px)}.decode-btn[data-v-40fe1683]{background:#52c41a;color:#000}.decode-btn[data-v-40fe1683]:hover:not(:disabled){background:#45a018;transform:translateY(-2px)}.encode-btn[data-v-40fe1683]:disabled,.decode-btn[data-v-40fe1683]:disabled{opacity:.6;cursor:not-allowed;transform:none}.method-info[data-v-40fe1683]{text-align:center;padding:12px;background:#f8f9fa;border-radius:8px;font-size:.9rem;color:#666}.output-container[data-v-40fe1683]{min-height:120px;padding:16px;border:2px solid #e0e0e0;border-radius:8px;background:#f8f9fa;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;word-break:break-all}.output-text[data-v-40fe1683]{color:#333;white-space:pre-wrap}.output-placeholder[data-v-40fe1683]{color:#999;font-style:italic}.templates-section[data-v-40fe1683]{border-left:1px solid #f0f0f0;padding-left:20px}.templates-section h3[data-v-40fe1683]{margin:0 0 20px;color:#333;font-size:1.2rem}.template-list[data-v-40fe1683]{margin-bottom:30px}.template-item[data-v-40fe1683]{padding:12px;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-bottom:8px}.template-item[data-v-40fe1683]:hover{border-color:#667eea;background:#f8f9fa}.template-name[data-v-40fe1683]{font-weight:600;color:#333;margin-bottom:4px}.template-desc[data-v-40fe1683]{font-size:.8rem;color:#666;margin-bottom:8px}.template-example[data-v-40fe1683]{font-size:.8rem;color:#999;font-family:monospace;background:#f0f0f0;padding:4px 8px;border-radius:4px}.quick-examples h4[data-v-40fe1683]{margin:0 0 16px;color:#333;font-size:1rem}.example-list[data-v-40fe1683]{display:flex;flex-direction:column;gap:8px}.example-item[data-v-40fe1683]{padding:8px 12px;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .3s ease}.example-item[data-v-40fe1683]:hover{border-color:#667eea;background:#f8f9fa}.example-text[data-v-40fe1683]{font-weight:500;color:#333;margin-bottom:2px}.example-method[data-v-40fe1683]{font-size:.7rem;color:#999}.modal-overlay[data-v-40fe1683]{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content[data-v-40fe1683]{background:#fff;border-radius:12px;width:90%;max-width:500px;max-height:80vh;overflow-y:auto}.modal-header[data-v-40fe1683]{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.modal-header h3[data-v-40fe1683]{margin:0;color:#333}.close-btn[data-v-40fe1683]{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#999}.modal-body[data-v-40fe1683]{padding:20px}.share-options[data-v-40fe1683]{margin-bottom:20px}.option-item[data-v-40fe1683]{margin-bottom:16px}.option-item label[data-v-40fe1683]{display:flex;align-items:center;gap:8px;cursor:pointer}.option-item input[type=checkbox][data-v-40fe1683]{margin:0}.expiry-input[data-v-40fe1683]{margin-top:8px;padding:8px 12px;border:1px solid #e0e0e0;border-radius:6px;width:100%}.share-actions[data-v-40fe1683]{display:flex;gap:12px;justify-content:flex-end}.share-btn[data-v-40fe1683],.cancel-btn[data-v-40fe1683]{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-weight:500}.share-btn[data-v-40fe1683]{background:#667eea;color:#000}.cancel-btn[data-v-40fe1683]{background:#f0f0f0;color:#666}@media (max-width: 1200px){.tool-layout[data-v-40fe1683]{grid-template-columns:250px 1fr 250px;gap:20px}}@media (max-width: 768px){.tool-layout[data-v-40fe1683]{grid-template-columns:1fr;gap:20px}.method-selector[data-v-40fe1683],.templates-section[data-v-40fe1683]{border:none;padding:0}.category-tabs[data-v-40fe1683]{flex-direction:row;overflow-x:auto;padding-bottom:10px}.category-tab[data-v-40fe1683]{white-space:nowrap;min-width:80px}}