diff --git a/static/style.css b/static/style.css
index db7966f..5f0b16f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -13,7 +13,7 @@ body {
   font-family: system-ui, sans-serif;
   background: var(--bg);
   color: #111;
-  max-width: 800px;
+  max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
@@ -79,3 +79,35 @@ button.secondary:hover { background: #e5e7eb; }
   pointer-events:none;
 }
 #toast.show { opacity:1; }
+
+/* Responsivita pro mobily */
+@media (max-width: 640px) {
+  body { padding: 0 .5rem; }
+  .row, .link-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  textarea { min-height: 140px; }
+  button { width: 100%; }
+}
+
+/* Grid layout pro široké obrazovky */
+.grid {
+  display: block;
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    align-items: start;
+  }
+  .left-col, .right-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+}
+
+
diff --git a/templates/decrypt.html b/templates/decrypt.html
index 61a4ebb..13468c6 100644
--- a/templates/decrypt.html
+++ b/templates/decrypt.html
@@ -3,5 +3,6 @@
   <div class="row">
     <textarea id="plainOut" readonly style="height:120px">{{.}}</textarea>
     <button type="button" class="secondary" onclick="copyEl('plainOut')">Copy</button>
+    <button type="button" class="secondary" onclick="clearEl('plainOut')">Clear</button>
   </div>
 </div>
diff --git a/templates/index.html b/templates/index.html
index f118118..3202555 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,83 +1,132 @@
-<!DOCTYPE html>
-<html lang="cs">
+<body>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Encryptor (HTMX)</title>
-  <script src="https://unpkg.com/htmx.org"></script>
+
+  <!-- CSS má být v <head> -->
   <link rel="stylesheet" href="/static/style.css">
+
+  <!-- Tohle jsi omylem smazal; bez toho HTMX nefunguje -->
+  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
 </head>
-<body>
-  <header>
-    <h1>🔐 Encryptor</h1>
-    <p class="subtitle">Jednoduché HTMX rozhraní pro šifrování zpráv cizím klíčem</p>
-  </header>
 
-  <section class="card">
-    <h2>Můj veřejný klíč</h2>
-    <div class="link-row">
-      <a href="/public.pem" target="_blank">public.pem</a>
-      <button onclick="copyFromUrl('/public.pem')">Copy</button>
+
+  <main class="grid">
+    <div class="left-col">
+      <section class="card">
+        <h2>Můj veřejný klíč</h2>
+        <div class="row">
+          <a href="/public.pem" target="_blank">public.pem</a>
+          <button onclick="copyFromUrl('/public.pem')">Copy</button>
+        </div>
+        <div class="row">
+          <a href="/public.crt" target="_blank">identity.crt</a>
+          <button onclick="copyFromUrl('/public.crt')">Copy</button>
+        </div>
+        <small>Pošli tohle kontaktům; můžou šifrovat pro tebe.</small>
+      </section>
+
+      <section class="card">
+        <h2>Šifrovat pro cizí klíč</h2>
+        <form hx-post="/encrypt" hx-target="#encryptResult" hx-swap="innerHTML">
+          <label>Zpráva</label>
+          <div class="row">
+            <textarea id="msg" name="message" placeholder="Sem napiš zprávu..."></textarea>
+            <button type="button" class="secondary" onclick="copyEl('msg')">Copy</button>
+            <button type="button" class="secondary" onclick="clearEl('msg')">Clear</button>
+          </div>
+
+          <label>Veřejný klíč příjemce (PEM nebo CERT)</label>
+          <div class="row">
+            <textarea id="peerKey" name="pubkey" placeholder="-----BEGIN PUBLIC KEY----- ..."></textarea>
+            <button type="button" class="secondary" onclick="copyEl('peerKey')">Copy</button>
+            <button type="button" class="secondary" onclick="clearEl('peerKey')">Clear</button>
+          </div>
+
+          <button type="submit" class="primary">Encrypt</button>
+        </form>
+        <div id="encryptResult" class="result"></div>
+      </section>
     </div>
-    <div class="link-row">
-      <a href="/public.crt" target="_blank">identity.crt</a>
-      <button onclick="copyFromUrl('/public.crt')">Copy</button>
+
+    <div class="right-col">
+      <section class="card">
+        <h2>Dešifrovat</h2>
+        <form hx-post="/decrypt" hx-target="#decryptResult" hx-swap="innerHTML">
+          <label>Payload (JSON envelope)</label>
+          <div class="row">
+            <textarea id="payload" name="payload" placeholder='{"ek":"...","n":"...","ct":"..."}'></textarea>
+            <button type="button" class="secondary" onclick="copyEl('payload')">Copy</button>
+            <button type="button" class="secondary" onclick="clearEl('payload')">Clear</button>
+          </div>
+          <button type="submit" class="primary">Decrypt</button>
+        </form>
+        <div id="decryptResult" class="result"></div>
+      </section>
     </div>
-    <small>Pošli tohle kontaktům; můžou šifrovat pro tebe.</small>
-  </section>
-
-  <section class="card">
-    <h2>Šifrovat pro cizí klíč</h2>
-    <form hx-post="/encrypt" hx-target="#encryptResult" hx-swap="innerHTML">
-      <label>Zpráva</label>
-      <div class="row">
-        <textarea id="msg" name="message" placeholder="Sem napiš zprávu..."></textarea>
-        <button type="button" class="secondary" onclick="copyEl('msg')">Copy</button>
-      </div>
-
-      <label>Veřejný klíč příjemce (PEM nebo CERT)</label>
-      <div class="row">
-        <textarea id="peerKey" name="pubkey" placeholder="-----BEGIN PUBLIC KEY----- ..."></textarea>
-        <button type="button" class="secondary" onclick="copyEl('peerKey')">Copy</button>
-      </div>
-
-      <button type="submit" class="primary">Encrypt</button>
-    </form>
-    <div id="encryptResult" class="result"></div>
-  </section>
-
-  <section class="card">
-    <h2>Dešifrovat</h2>
-    <form hx-post="/decrypt" hx-target="#decryptResult" hx-swap="innerHTML">
-      <label>Payload (JSON envelope)</label>
-      <div class="row">
-        <textarea id="payload" name="payload" placeholder='{"ek":"...","n":"...","ct":"..."}'></textarea>
-        <button type="button" class="secondary" onclick="copyEl('payload')">Copy</button>
-      </div>
-      <button type="submit" class="primary">Decrypt</button>
-    </form>
-    <div id="decryptResult" class="result"></div>
-  </section>
+  </main>
 
   <div id="toast">Zkopírováno</div>
+
   <script>
-    function showToast(msg='Zkopírováno') {
-      const t = document.getElementById('toast');
-      t.textContent = msg;
-      t.classList.add('show');
-      setTimeout(() => t.classList.remove('show'), 1200);
-    }
-    async function copyEl(id) {
-      const el = document.getElementById(id);
-      const val = (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') ? el.value : el.textContent;
-      await navigator.clipboard.writeText(val || '');
+  function showToast(msg='Zkopírováno') {
+    const t = document.getElementById('toast');
+    t.textContent = msg;
+    t.classList.add('show');
+    setTimeout(() => t.classList.remove('show'), 1200);
+  }
+
+  async function copyText(text) {
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.left = '-9999px';
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      }
       showToast();
+    } catch (e) {
+      console.error('copyText error:', e);
+      alert('Nepodařilo se zkopírovat do schránky.\n' + e);
     }
-    async function copyFromUrl(url) {
-      const res = await fetch(url);
+  }
+
+  async function copyEl(id) {
+    const el = document.getElementById(id);
+    const val = (el && (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT'))
+      ? el.value
+      : (el?.textContent ?? '');
+    await copyText(val);
+  }
+
+  async function copyFromUrl(url) {
+    try {
+      const res = await fetch(url, {cache: 'no-store'});
+      if (!res.ok) throw new Error('HTTP ' + res.status);
       const text = await res.text();
-      await navigator.clipboard.writeText(text);
-      showToast();
+      await copyText(text);
+    } catch (e) {
+      console.error('copyFromUrl error:', e);
+      alert('Nepodařilo se načíst obsah ke zkopírování.\n' + e);
     }
-  </script>
+  }
+
+  function clearEl(id) {
+    const el = document.getElementById(id);
+    if (el && (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT')) {
+      el.value = '';
+    } else if (el) {
+      el.textContent = '';
+    }
+  }
+</script>
+
 </body>
-</html>
