*{box-sizing:border-box;margin:0;padding:0}:root{--transition-speed: .3s}.app{min-height:100vh;width:100vw;display:flex;flex-direction:column;transition:background-color var(--transition-speed),color var(--transition-speed)}.app.dark{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--text-primary: #c9d1d9;--text-secondary: #8b949e;--border-color: #30363d;--accent-primary: #58a6ff;--accent-secondary: #238636;--accent-danger: #f85149;--btn-bg: #21262d;--btn-hover: #30363d}.app.light{--bg-primary: #ffffff;--bg-secondary: #f6f8fa;--bg-tertiary: #eaeef2;--text-primary: #24292f;--text-secondary: #57606a;--border-color: #d0d7de;--accent-primary: #0969da;--accent-secondary: #1a7f37;--accent-danger: #cf222e;--btn-bg: #f6f8fa;--btn-hover: #eaeef2}.app{background-color:var(--bg-primary);color:var(--text-primary)}.theme-toggle{position:absolute;top:1rem;right:1rem;z-index:10}.theme-toggle button{padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:6px;background-color:var(--btn-bg);color:var(--text-primary);cursor:pointer;font-size:.875rem;transition:all var(--transition-speed)}.theme-toggle button:hover{background-color:var(--btn-hover);border-color:var(--accent-primary)}.paste-error{position:absolute;top:1rem;left:50%;transform:translate(-50%);padding:.75rem 1rem;background-color:var(--accent-danger);color:#fff;border-radius:6px;font-size:.875rem;font-weight:500;z-index:20;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.grid-container{flex:1;display:flex;flex-direction:column;gap:1.5rem;padding:4rem 2rem 2rem;max-width:1400px;margin:0 auto;width:100%}.grid-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.grid-cell{display:flex;flex-direction:column;gap:.75rem}.grid-cell label{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.grid-cell textarea{width:100%;padding:1rem;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.5;resize:vertical;transition:all var(--transition-speed)}.grid-cell textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px #58a6ff1a}.grid-cell textarea::placeholder{color:var(--text-secondary)}.grid-cell textarea[readOnly]{background-color:var(--bg-tertiary);cursor:default}.action-btn{padding:1rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-speed);text-transform:uppercase;letter-spacing:.05em}.action-btn.decode-btn{background-color:var(--accent-primary);color:#fff}.action-btn.decode-btn:hover{opacity:.9;transform:translateY(-1px)}.action-btn.decode-btn:active{transform:translateY(0)}.action-btn.encode-btn{background-color:var(--accent-secondary);color:#fff}.action-btn.encode-btn:hover{opacity:.9;transform:translateY(-1px)}.action-btn.encode-btn:active{transform:translateY(0)}.input-cell .input-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.input-cell .input-container textarea{padding-right:5rem}.input-cell .input-container .paste-btn{position:absolute;top:.75rem;right:.75rem;padding:.375rem .75rem;border:1px solid var(--border-color);border-radius:6px;background-color:var(--btn-bg);color:var(--text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all var(--transition-speed)}.input-cell .input-container .paste-btn:hover{background-color:var(--btn-hover);border-color:var(--accent-primary);color:var(--accent-primary)}.result-cell .result-container{position:relative;display:flex;flex-direction:column;gap:.5rem}.result-cell .result-container textarea{padding-right:5rem}.result-cell .result-container .copy-btn{position:absolute;top:.75rem;right:.75rem;padding:.375rem .75rem;border:1px solid var(--border-color);border-radius:6px;background-color:var(--btn-bg);color:var(--text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all var(--transition-speed)}.result-cell .result-container .copy-btn:hover{background-color:var(--btn-hover);border-color:var(--accent-primary);color:var(--accent-primary)}@media(max-width:768px){.grid-row{grid-template-columns:1fr;gap:1.5rem}.grid-container{padding:3.5rem 1rem 1rem}.theme-toggle{top:.5rem;right:.5rem}}