.url-encoder-section{color:#e2e8f0;background:#0b1220;padding:90px 20px}.url-encoder-container{max-width:900px;margin:0 auto}.url-encoder-heading{text-align:center;margin-bottom:40px}.url-encoder-heading .section-label{color:#2dd4bf;letter-spacing:2px;font-size:12px;font-weight:700}.url-encoder-heading h1{margin:12px 0;font-size:36px}.url-encoder-heading p{color:#94a3b8;font-size:16px}.url-encoder-panel{background:#111c2e;border:1px solid #26364d;border-radius:16px;padding:30px}.url-encoder-panel>label,.url-output-header label{color:#e2e8f0;margin-bottom:12px;font-size:15px;font-weight:600;display:block}#url-encoder-input,#url-encoder-output{box-sizing:border-box;resize:vertical;color:#e2e8f0;background:#0b1220;border:1px solid #334155;border-radius:8px;outline:none;width:100%;min-height:130px;padding:15px;font-family:monospace;font-size:14px;line-height:1.6;display:block}#url-encoder-input:focus{border-color:#2dd4bf}#url-encoder-output{color:#a7f3d0}.url-encoder-actions{flex-wrap:wrap;gap:12px;margin:20px 0;display:flex}.url-encoder-actions button,.url-copy-btn{cursor:pointer;border-radius:8px;padding:11px 20px;font-size:14px;font-weight:600;transition:all .2s}.url-primary-btn{color:#0b1220;background:#2dd4bf;border:1px solid #2dd4bf}.url-primary-btn:hover{background:#5eead4}.url-secondary-btn{color:#cbd5e1;background:0 0;border:1px solid #475569}.url-secondary-btn:hover{color:#2dd4bf;border-color:#2dd4bf}.url-encoder-status{color:#94a3b8;background:#1e293b;border-radius:8px;margin-bottom:25px;padding:12px 15px;font-size:13px}.url-encoder-status.success{color:#a7f3d0;background:#064e3b}.url-encoder-status.error{color:#fecaca;background:#7f1d1d}.url-output-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.url-output-header label{margin:0}.url-copy-btn{color:#2dd4bf;background:0 0;border:1px solid #2dd4bf;padding:7px 15px}.url-copy-btn:hover{background:#134e4a}@media (width<=600px){.url-encoder-section{padding:60px 15px}.url-encoder-panel{padding:20px 15px}.url-encoder-heading h1{font-size:28px}.url-encoder-actions button{flex:auto}}.url-encoder-info ul,.url-encoder-info ol{margin:12px 0 22px;padding-left:1.5rem}.url-encoder-info li{margin-bottom:5px;padding-left:3px;line-height:1.65}.url-encoder-info li::marker{color:#56ddc2}