*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6}.container{max-width:800px;margin:0 auto;padding:20px}header{text-align:center;background-color:#fff;border-radius:8px;margin-bottom:40px;padding:20px;box-shadow:0 2px 4px #0000001a}h1{color:#2c3e50;margin-bottom:8px;font-size:2rem}.subtitle{color:#7f8c8d;font-size:.9rem}main{flex-direction:column;gap:20px;display:flex}.section{background-color:#fff;border-radius:8px;padding:24px;box-shadow:0 2px 4px #0000001a}.section h2{color:#2c3e50;border-bottom:2px solid #3498db;margin-bottom:16px;padding-bottom:8px;font-size:1.5rem}.form-group{margin-bottom:16px}.form-group label{color:#555;margin-bottom:8px;font-weight:500;display:block}.form-control{border:1px solid #ddd;border-radius:4px;width:100%;padding:10px;font-family:inherit;font-size:1rem}.form-control:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 3px #3498db1a}.form-control:disabled{cursor:not-allowed;background-color:#f0f0f0}.receive-output{resize:vertical;min-height:200px;font-family:Courier New,monospace;font-size:.9rem}.button-group{flex-wrap:wrap;gap:12px;margin-bottom:16px;display:flex}.input-group{gap:8px;display:flex}.input-group .form-control{flex:1}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:4px;padding:10px 20px;font-size:1rem;font-weight:500;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background-color:#3498db}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-secondary{color:#fff;background-color:#95a5a6}.btn-secondary:hover:not(:disabled){background-color:#7f8c8d}.btn-outline{color:#3498db;background-color:#0000;border:2px solid #3498db}.btn-outline:hover:not(:disabled){color:#fff;background-color:#3498db}.status-message{border-radius:4px;margin-top:12px;padding:12px;font-size:.9rem}.status-message.info{color:#0c5460;background-color:#d1ecf1;border:1px solid #bee5eb}.status-message.success{color:#155724;background-color:#d4edda;border:1px solid #c3e6cb}.status-message.error{color:#721c24;background-color:#f8d7da;border:1px solid #f5c6cb}.status-message.warning{color:#856404;background-color:#fff3cd;border:1px solid #ffeeba}@media (width<=600px){.container{padding:10px}h1{font-size:1.5rem}.section{padding:16px}.button-group{flex-direction:column}.btn{width:100%}.input-group{flex-direction:column}}