*{box-sizing:border-box}:root{color:#213547;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:400;line-height:1.5}body{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}.app-container{max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem}header{text-align:center;margin-bottom:3rem}header h1{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:700}header p{color:#666;font-size:1.1rem}.main-content{flex-direction:column;gap:2rem;display:flex}.error-message{color:#c33;text-align:center;background-color:#fee;border:1px solid #fcc;border-radius:8px;padding:1rem;font-weight:500}.encoder-section{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;display:grid}.input-group,.result-group{flex-direction:column;gap:.75rem;display:flex}label{color:#333;font-size:.95rem;font-weight:600}.label-with-copy{justify-content:space-between;align-items:center;gap:1rem;display:flex}textarea{resize:vertical;background-color:#fafafa;border:2px solid #e0e0e0;border-radius:8px;width:100%;min-height:280px;padding:1rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1rem;transition:border-color .3s,box-shadow .3s}textarea:focus{background-color:#fff;border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}textarea:read-only{cursor:not-allowed;background-color:#f5f5f5}button{cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:8px;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;transition:all .3s}button:disabled{opacity:.6;cursor:not-allowed}.encode-btn{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.encode-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.decode-btn{color:#fff;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.decode-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #f5576c66}.clear-btn{color:#fff;background:#6c757d;width:100%;max-width:300px;margin:0 auto}.clear-btn:hover{background:#5a6268;transform:translateY(-2px);box-shadow:0 4px 12px #6c757d66}.copy-btn{color:#fff;text-transform:none;letter-spacing:normal;white-space:nowrap;background:#28a745;padding:.5rem 1rem;font-size:.875rem}.copy-btn:hover:not(:disabled){background:#218838;transform:translateY(-2px);box-shadow:0 2px 8px #28a74566}.copy-btn:disabled{opacity:.5;background:#6c757d}@media (max-width:768px){.app-container{padding:1rem}header h1{font-size:2rem}.encoder-section{grid-template-columns:1fr}}