From a253587dfa21c5b96b2ae30e44090e8196b2c859 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 17 Oct 2025 12:46:57 +0200
Subject: [PATCH] ui(debug): add subtle background to payload textarea for
 better editability indication

---
 src/components/Debug.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Debug.tsx b/src/components/Debug.tsx
index 28c28855..53a4ae2e 100644
--- a/src/components/Debug.tsx
+++ b/src/components/Debug.tsx
@@ -274,7 +274,12 @@ const Debug: React.FC = () => {
           <h3 className="section-title">Encryption Tools</h3>
           <div className="setting-group">
             <label className="setting-label">Payload</label>
-            <textarea className="textarea w-full" value={payload} onChange={e => setPayload(e.target.value)} rows={3} />
+                <textarea 
+                  className="textarea w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700" 
+                  value={payload} 
+                  onChange={e => setPayload(e.target.value)} 
+                  rows={3} 
+                />
             <div className="flex gap-2 mt-3">
               <button className="btn btn-secondary" onClick={() => { setCipher44(''); setCipher04(''); setPlain44(''); setPlain04(''); setTEncrypt44(null); setTEncrypt04(null); setTDecrypt44(null); setTDecrypt04(null) }}>Clear</button>
             </div>