.page-content {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 60vh;
padding-top: var(--space-2xl);
}
.error-container {
text-align: center;
max-width: 600px;
width: 90%;
padding: var(--space-2xl);
opacity: 0;
animation: fadeIn 0.5s ease forwards;
}
.error-code {
font-size: 5rem;
font-weight: 800;
background: var(--gradient-accent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-md);
line-height: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
font-family: var(--font-family);
}
.error-message {
font-size: 1.5rem;
color: var(--text-primary);
margin-bottom: var(--space-xl);
font-weight: 600;
}
.error-description {
color: var(--text-secondary);
font-size: 1rem;
margin-bottom: var(--space-xl);
line-height: 1.6;
}
.error-info {
background: var(--bg-glass);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-family: var(--font-family);
font-size: 0.875rem;
color: var(--text-secondary);
backdrop-filter: blur(10px);
margin-bottom: var(--space-lg);
}
.error-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.page-content {
min-height: 50vh;
padding-top: var(--space-xl);
}
.error-container {
padding: var(--space-xl);
margin: var(--space-sm);
width: 95%;
}
.error-code {
font-size: 4rem;
}
.error-message {
font-size: 1.25rem;
}
.error-actions {
flex-direction: column;
align-items: center;
}
}