*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#0a0a0a;--bg-secondary:#1a1a1a;--bg-tertiary:#2a2a2a;--bg-card:#141414;--text-primary:#ffffff;--text-secondary:#b3b3b3;--text-muted:#666666;--accent:#00d4ff;--accent-hover:#00b8e6;--accent-glow:rgba(0, 212, 255, 0.3);--border:#333333;--success:#00ff88;--error:#ff4757;--warning:#ffa502}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}.container{max-width:100%;width:100%;margin:0 auto;padding:0 20px}main{flex:1;width:100%}.main-container{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;padding:2rem 20px;max-width:100%;width:100%;min-height:calc(100vh - 300px)}.input-section,.output-section{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;position:relative;overflow:hidden;height:700px;display:flex;flex-direction:column}.input-section::before,.output-section::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--success))}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.section-title{font-size:1.2rem;font-weight:600;color:var(--accent)}.char-count{font-size:.9rem;color:var(--text-muted)}.editor-container{position:relative;height:520px;border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .3s ease;flex-shrink:0}.editor-container:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.editor-with-lines{display:flex;height:100%}.line-numbers-container{background:var(--bg-secondary);border-right:1px solid var(--border);padding:1rem .5rem 1rem .5rem;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;color:var(--text-muted);text-align:right;user-select:none;min-width:50px;overflow:hidden;white-space:pre-line;word-break:keep-all}.editor-textarea{flex:1;background:var(--bg-primary);border:none;padding:1rem;color:var(--text-primary);font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;resize:none;outline:0;overflow-y:auto;white-space:pre;word-wrap:normal}.editor-textarea::placeholder{color:var(--text-muted)}.output-container{display:flex;height:100%}.editor-textarea{background-image:linear-gradient(to right,transparent 0,transparent 0),repeating-linear-gradient(transparent,transparent 21px,rgba(255,255,255,.02) 21px,rgba(255,255,255,.02) 22px)}.output-container{display:flex;height:100%}.output-line-numbers{background:var(--bg-secondary);border-right:1px solid var(--border);padding:1rem .5rem;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;color:var(--text-muted);text-align:right;user-select:none;min-width:50px;overflow:hidden;white-space:pre-line;word-break:keep-all}.output-editor{width:100%;height:100%;background:var(--bg-primary);color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word;word-break:break-all;overflow:auto;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;padding:1rem;scrollbar-width:thin;scrollbar-color:var(--border) var(--bg-primary)}.output-editor::-webkit-scrollbar{width:8px}.output-editor::-webkit-scrollbar-track{background:var(--bg-primary)}.output-editor::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.output-editor::-webkit-scrollbar-thumb:hover{background:var(--accent)}.controls-section{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.2rem;min-width:300px;max-width:300px;height:fit-content;position:sticky;top:100px}.controls-title{text-align:center;font-size:1.3rem;font-weight:600;color:var(--accent);margin-bottom:.5rem}.btn-group{display:flex;flex-direction:column;gap:.8rem}.btn{background:linear-gradient(135deg,var(--accent) 0,var(--accent-hover) 100%);color:var(--bg-primary);border:none;padding:.7rem .8rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.85rem;transition:all .3s ease;position:relative;overflow:hidden}.btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover::before{left:100%}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px var(--accent-glow)}.btn-secondary{background:linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:linear-gradient(135deg,var(--border) 0,var(--bg-tertiary) 100%);border-color:var(--accent)}.btn-danger{background:linear-gradient(135deg,var(--error) 0,#e63946 100%);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.status-bar{margin-top:1rem;padding:.8rem;border-radius:8px;font-size:.9rem;text-align:center;transition:all .3s ease;height:3rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid transparent;background:0 0;opacity:0}.status-success{background:rgba(0,255,136,.1)!important;border:1px solid var(--success)!important;color:var(--success);opacity:1!important}.status-error{background:rgba(255,71,87,.1)!important;border:1px solid var(--error)!important;color:var(--error);opacity:1!important}.status-warning{background:rgba(255,165,2,.1)!important;border:1px solid var(--warning)!important;color:var(--warning);opacity:1!important}.status-default{color:var(--text-secondary);opacity:.7!important}.format-options{display:flex;flex-direction:column;gap:.5rem}.option-group{display:flex;align-items:center;gap:.5rem}.option-group label{color:var(--text-secondary);font-size:.9rem;cursor:pointer}.option-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.option-group input[type=number]{background:var(--bg-primary);border:1px solid var(--border);border-radius:4px;padding:.3rem .5rem;color:var(--text-primary);width:60px}.file-input-group{display:flex;flex-direction:column;gap:.5rem}.file-input-container{position:relative;overflow:hidden;display:inline-block;width:100%}.file-input{position:absolute;left:-9999px;opacity:0}.file-input-label{display:block;padding:.8rem;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:6px;cursor:pointer;text-align:center;transition:all .3s ease;font-size:.9rem}.file-input-label:hover{background:var(--border);border-color:var(--accent)}.encoding-stats{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:1rem;margin-top:1rem}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.stat-item{display:flex;justify-content:space-between;font-size:.85rem}.stat-label{color:var(--text-secondary)}.stat-value{color:var(--accent);font-weight:600}.copy-btn{position:absolute;top:1rem;right:1rem;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);padding:.5rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .3s ease;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}.copy-btn:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}.floating-particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1}.particle{position:absolute;width:2px;height:2px;background:var(--accent);border-radius:50%;opacity:.3;animation:float 10s infinite linear}@keyframes float{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:.3}90%{opacity:.3}100%{transform:translateY(-100px) translateX(100px);opacity:0}}footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:3rem 0 2rem;margin-top:auto;width:100%}.footer-container{max-width:1400px;margin:0 auto;padding:0 20px}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h3{color:var(--accent);font-size:1.2rem;margin-bottom:1rem}.footer-section p{color:var(--text-secondary);line-height:1.6}.footer-links{list-style:none;padding:0}.footer-links li{margin-bottom:.5rem}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .3s ease}.footer-links a:hover{color:var(--accent)}.footer-social{display:flex;gap:1rem;margin-top:1rem}.social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);text-decoration:none;transition:all .3s ease}.social-link:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);transform:translateY(-2px)}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid var(--border);color:var(--text-muted)}.footer-bottom p{margin-bottom:.5rem}@media (max-width:1200px){.main-container{grid-template-columns:1fr;gap:1.5rem}.controls-section{position:static;min-width:auto}}@media (max-width:768px){.nav-links{display:none}.features{gap:1rem}.feature{font-size:.8rem}.editor-container{height:400px}.logo{font-size:2rem}.main-container{padding:1rem}.footer-content{grid-template-columns:1fr;gap:1.5rem}.footer-social{justify-content:center}}