first try of styling things for better usability

templates/style.css

@@ -1,10 +1,22 @@
+/*
+ * Page scaffold: center the card, let it shrink with the viewport.
+ *
+ * ┌────────────── #app-content ──────────────┐
+ * │  16px  ┌──────────── card ──────────┐    │
+ * │  pad   │  padding 32px, max 640px  │    │
+ * │        └────────────────────────────┘    │
+ * └──────────────────────────────────────────┘
+ */
 .atocal-container {
-    max-width: 760px;
+    display: flex;
-    margin: 60px auto;
+    justify-content: center;
-    padding: 20px;
+    padding: 48px 16px;
 }
 
 .atocal-card {
+    width: 100%;
+    max-width: 640px;
+    align-self: flex-start;
     background: var(--color-main-background);
     border: 1px solid var(--color-border);
     border-radius: 12px;
@@ -100,3 +112,58 @@
     border: 1px solid var(--color-border);
     color: var(--color-main-text);
 }
+
+/* Feedback for pointer users */
+.atocal-actions button.primary:hover {
+    background: var(--color-primary-element-hover);
+}
+
+.atocal-actions a.secondary:hover {
+    background: var(--color-background-hover);
+    border-color: var(--color-primary-element);
+}
+
+.atocal-row select:hover {
+    border-color: var(--color-primary-element);
+}
+
+/* Keyboard navigation must stay visible */
+.atocal-actions button:focus-visible,
+.atocal-actions a:focus-visible,
+.atocal-row select:focus-visible {
+    outline: 2px solid var(--color-primary-element);
+    outline-offset: 2px;
+}
+
+/* Phones: stack rows and buttons, restore tap-friendly spacing */
+@media (max-width: 600px) {
+    .atocal-container {
+        padding: 16px 12px;
+    }
+
+    .atocal-card {
+        padding: 20px;
+        border-radius: 8px;
+    }
+
+    .atocal-row {
+        grid-template-columns: 1fr;
+        gap: 4px;
+        padding: 12px 0;
+    }
+
+    .atocal-row select {
+        max-width: none;
+    }
+
+    .atocal-actions {
+        flex-direction: column;
+    }
+
+    .atocal-actions button.primary,
+    .atocal-actions a.secondary {
+        box-sizing: border-box;
+        width: 100%;
+        text-align: center;
+    }
+}