error handling

zbiorka_app/templates/error.html

@@ -15,6 +15,9 @@
         body {
             margin: 0;
             padding: 0;
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
         }
 
         .error-page {
@@ -29,33 +32,71 @@
             width: 100%;
             max-width: 720px;
             text-align: center;
-            padding: 2rem;
+            padding: 2.5rem 2rem;
-            border-radius: 12px;
+            border-radius: var(--radius);
-            background: #fff;
+
-            box-shadow: 0 8px 30px rgba(0,0,0,.08);
+            background: var(--surface-1);
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow-md);
         }
 
         .error-code {
             font-size: 3rem;
             font-weight: 700;
-            margin-bottom: 1rem;
+            margin-bottom: .25rem;
+            color: var(--accent);
         }
 
         .error-name {
-            font-size: 1.5rem;
+            font-size: 1.6rem;
-            margin-bottom: 1rem;
+            margin-bottom: .5rem;
+            color: var(--text);
         }
 
         .error-message {
             margin-bottom: 1.5rem;
-            opacity: .9;
+            color: var(--text-muted);
+            line-height: 1.5;
         }
 
         .error-actions a {
             display: inline-block;
-            padding: .75rem 1.25rem;
+            padding: .6rem 1.3rem;
-            text-decoration: none;
             border-radius: 8px;
+            font-weight: 700;
+
+            background-color: var(--accent);
+            border: 1px solid var(--accent-600);
+            color: #111;
+
+            transition: transform 120ms ease, background-color var(--trans), border-color var(--trans);
+        }
+
+        .error-actions a:hover {
+            background-color: var(--accent-600);
+            border-color: var(--accent-700);
+            color: #111;
+            transform: translateY(-1px);
+        }
+
+        .error-actions a:active {
+            background-color: var(--accent-700);
+            border-color: var(--accent-700);
+            transform: translateY(0);
+        }
+
+        @media (max-width: 576px) {
+            .error-box {
+                padding: 2rem 1.25rem;
+            }
+
+            .error-code {
+                font-size: 2.4rem;
+            }
+
+            .error-name {
+                font-size: 1.3rem;
+            }
         }
     </style>
 </head>