:root{--bg: #0f172a;--bg-panel: #1e293b;--accent: #3b82f6;--text: #e2e8f0;--text-muted: #94a3b8;--radius: .75rem;--font: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg);color:var(--text);font-family:var(--font);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:2rem}h1{font-size:2rem;font-weight:700;margin-bottom:1.5rem;color:var(--accent)}label{font-size:.9rem;font-weight:600;margin:.75rem 0 .25rem;color:var(--text-muted);display:block}input,textarea{width:100%;padding:.75rem 1rem;background-color:var(--bg-panel);border:1px solid #334155;border-radius:var(--radius);color:var(--text);font-size:1rem;outline:none;transition:border .2s}input:focus,textarea:focus{border-color:var(--accent)}textarea{resize:vertical}.buttons{display:flex;gap:1rem;margin:1rem 0}button{flex:1;padding:.75rem 1rem;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}button.btn-secondary{margin-top:.5rem;width:100%;padding:.75rem;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer}#encrypt{background:var(--accent);color:#fff}#encrypt:hover{background-color:#2563eb}#decrypt{background-color:#475569;color:#fff}#decrypt:hover{background-color:#334155}#copyOutput{background-color:#22c55e;color:#fff}#copyOutput:hover{background-color:#16a34a}.output-container{margin-top:1rem}.output{background-color:var(--bg-panel);border:1px solid #334155;border-radius:var(--radius);max-height:400px;overflow-y:scroll;padding:1rem;min-height:4rem;color:var(--text);font-size:.95rem;white-space:pre-wrap;overflow-wrap:break-word}.container{width:100%;max-width:600px}