protected-route-fix

panel/styles.css

@@ -177,6 +177,81 @@ body {
 	}
 }
 
+/* Auth Error Screen */
+.auth-error-screen {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+	background-color: var(--background-color);
+	padding: 2rem;
+}
+
+.auth-error-content {
+	text-align: center;
+	max-width: 500px;
+	padding: 2rem;
+	background-color: var(--card-background);
+	border-radius: var(--border-radius);
+	border: 1px solid var(--border-color);
+	box-shadow: var(--shadow-sm);
+}
+
+.auth-error-content h2 {
+	color: var(--danger-color);
+	font-size: var(--font-size-xl);
+	margin-bottom: 1rem;
+	font-weight: 600;
+}
+
+.auth-error-content p {
+	color: var(--text-color-light);
+	font-size: var(--font-size-base);
+	margin-bottom: 2rem;
+	line-height: 1.6;
+}
+
+.auth-error-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.auth-error-actions .btn {
+	padding: 0.75rem 1.5rem;
+	border-radius: var(--border-radius);
+	border: none;
+	font-size: var(--font-size-base);
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	text-decoration: none;
+	display: inline-block;
+}
+
+.auth-error-actions .btn-primary {
+	background-color: var(--primary-color);
+	color: white;
+}
+
+.auth-error-actions .btn-primary:hover {
+	background-color: var(--primary-color-dark);
+	transform: translateY(-1px);
+}
+
+.auth-error-actions .btn-secondary {
+	background-color: transparent;
+	color: var(--text-color-light);
+	border: 1px solid var(--border-color);
+}
+
+.auth-error-actions .btn-secondary:hover {
+	background-color: var(--hover-color);
+	border-color: var(--primary-color);
+	color: var(--text-color);
+}
+
 .error-message {
 	background-color: var(--danger-light);
 	border-left: 4px solid var(--danger-color);