.url-encoder-container{max-width:1200px;margin:0 auto;padding:2rem 1rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1f2937;background-color:#f9fafb;min-height:100vh;display:flex;flex-direction:column}@media(max-width:640px){.url-encoder-container{padding:1rem}}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2.5rem;margin-bottom:1rem;color:#1e40af}@media(max-width:640px){.header h1{font-size:1.75rem}}.header .description{font-size:1.125rem;color:#6b7280;max-width:600px;margin:0 auto}@media(max-width:640px){.header .description{font-size:1rem}}.main-content{flex:1;display:flex;flex-direction:column;gap:2rem}.control-panel{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}@media(max-width:640px){.control-panel{flex-direction:column;align-items:stretch}}.mode-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.375rem;font-weight:500;transition:all .2s ease;cursor:pointer;background-color:#3b82f6;color:#fff}.mode-toggle:disabled{opacity:.5;cursor:not-allowed}.mode-toggle:hover{background-color:#1e40af}.clear-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.375rem;font-weight:500;transition:all .2s ease;cursor:pointer;background-color:rgba(0,0,0,0);border:1px solid #e5e7eb;color:#1f2937}.clear-button:disabled{opacity:.5;cursor:not-allowed}.clear-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.input-output-section{display:flex;flex-direction:column;gap:1.5rem}.input-wrapper,.output-wrapper{display:flex;flex-direction:column;gap:.5rem}.output-header{display:flex;align-items:center;justify-content:space-between}label{font-weight:500;color:#1f2937}textarea{width:100%;padding:1rem;border:1px solid #e5e7eb;border-radius:.375rem;font-family:inherit;resize:vertical;min-height:120px;background-color:#fff;transition:border-color .2s ease}textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}textarea::placeholder{color:#6b7280}textarea:read-only{background-color:#f9fafb}.copy-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.375rem;font-weight:500;transition:all .2s ease;cursor:pointer;background-color:rgba(0,0,0,0);border:1px solid #e5e7eb;color:#1f2937}.copy-button:disabled{opacity:.5;cursor:not-allowed}.copy-button:hover:not(:disabled){background-color:rgba(0,0,0,.05)}.copy-button.copied{background-color:#10b981;color:#fff;border-color:#10b981}.error-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background-color:rgba(239,68,68,.1);border-left:4px solid #ef4444;color:#ef4444;margin-top:1rem;border-radius:.25rem}.info-section{margin-top:2rem;padding:1.5rem;background-color:#fff;border-radius:.5rem;border:1px solid #e5e7eb}.info-section h2,.info-section h3{color:#1e40af;margin-bottom:1rem}.info-section h3{margin-top:1.5rem;font-size:1.125rem}.info-section p{margin-bottom:1rem;line-height:1.6}.info-section ul{margin-left:1.5rem;line-height:1.6}.footer{margin-top:2rem;text-align:center;color:#6b7280;font-size:.875rem;padding:1rem 0;border-top:1px solid #e5e7eb}@media(prefers-color-scheme:dark){.url-encoder-container{background-color:#111827;color:#fff}.header h1{color:#3b82f6}textarea{background-color:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1);color:#fff}textarea:read-only{background-color:hsla(0,0%,100%,.03)}.clear-button,.copy-button{border-color:hsla(0,0%,100%,.1);color:#fff}.clear-button:hover:not(:disabled),.copy-button:hover:not(:disabled),.info-section{background-color:hsla(0,0%,100%,.05)}.footer,.info-section{border-color:hsla(0,0%,100%,.1)}}@media(min-width:641px)and (max-width:1024px){.input-output-section{flex-direction:column}}@media(min-width:1025px){.input-output-section{flex-direction:column}}