Add error page

src/main/resources/static/css/styles.css

@@ -67,7 +67,8 @@ body {
 }
 
 .channels-body,
-.settings-body {
+.settings-body,
+.error-body {
     min-height: 100vh;
     background:
         radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.16), transparent 30%),
@@ -86,8 +87,16 @@ body {
     gap: 20px;
 }
 
+.error-shell {
+    width: min(820px, 100%);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
 .channels-header,
-.settings-header {
+.settings-header,
+.error-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -103,6 +112,11 @@ body {
     justify-content: center;
 }
 
+.error-main {
+    display: flex;
+    justify-content: center;
+}
+
 .settings-card {
     width: 100%;
     background: rgba(11, 18, 32, 0.95);
@@ -115,6 +129,45 @@ body {
     gap: 10px;
 }
 
+.error-card {
+    width: 100%;
+    background: rgba(11, 18, 32, 0.95);
+    border: 1px solid #1f2937;
+    border-radius: 16px;
+    padding: clamp(20px, 3vw, 32px);
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.error-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 10px;
+    margin-top: 8px;
+}
+
+.error-detail {
+    border: 1px solid #1f2937;
+    border-radius: 10px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.detail-label {
+    color: #94a3b8;
+    font-size: 13px;
+    margin: 0 0 4px;
+}
+
+.detail-value {
+    margin: 0;
+    color: #e2e8f0;
+    font-weight: 600;
+    word-break: break-word;
+}
+
 .channels-main {
     display: flex;
     justify-content: center;