.error-container{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-6) var(--spacing-4);position:relative;overflow:hidden}.error-content{max-width:600px;width:100%;text-align:center;z-index:1;position:relative}.error-code{font-family:var(--font-family-display);font-size:8rem;font-weight:900;background:var(--brand-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:var(--spacing-4);animation:fadeInScale .6s ease}.error-icon{font-size:5rem;color:var(--brand-primary);margin-bottom:var(--spacing-4);animation:bounce 2s infinite}.error-icon-server{color:var(--color-warning)}.error-title{font-family:var(--font-family-heading);font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-3);animation:fadeIn .8s ease}.error-description{font-size:1.1rem;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-6);animation:fadeIn 1s ease}.error-suggestions{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-5);margin-bottom:var(--spacing-6);text-align:left;animation:slideUp .8s ease}.suggestions-title{font-family:var(--font-family-heading);font-size:1.2rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-3)}.suggestions-list{list-style:none;padding:0;margin:0}.suggestions-list li{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2) 0;color:var(--text-secondary);font-size:1rem}.suggestions-list li i{color:var(--color-success);font-size:1.1rem}.error-actions{display:flex;gap:var(--spacing-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--spacing-6);animation:fadeIn 1.2s ease}.error-fact{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));border-radius:var(--radius-lg);padding:var(--spacing-5);color:var(--text-on-primary);text-align:left;display:flex;gap:var(--spacing-4);align-items:flex-start;animation:fadeIn 1.4s ease}.fact-icon{font-size:2.5rem;flex-shrink:0}.fact-content{flex:1}.fact-content strong{display:block;font-size:1.1rem;margin-bottom:var(--spacing-2)}.fact-content p{margin:0;line-height:1.6;opacity:.95}.error-details{background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);margin-bottom:var(--spacing-6);animation:fadeIn 1.2s ease}.error-details-summary{padding:var(--spacing-3);cursor:pointer;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:var(--spacing-2);-webkit-user-select:none;-moz-user-select:none;user-select:none}.error-details-summary:hover{background:var(--bg-primary)}.error-details-summary i{color:var(--brand-primary)}.error-details-content{padding:var(--spacing-4);border-top:1px solid var(--border-primary);text-align:left}.error-details-content p{margin-bottom:var(--spacing-2);color:var(--text-secondary);font-size:.95rem}.error-details-content strong{color:var(--text-primary)}.error-note{margin-top:var(--spacing-3);padding:var(--spacing-3);background:var(--bg-info);border-left:4px solid var(--color-info);border-radius:var(--radius-sm);font-size:.9rem}.error-decoration{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.floating-icon{position:absolute;font-size:3rem;opacity:.1;animation:float 10s infinite ease-in-out}.floating-icon:nth-child(1){top:10%;left:10%;animation-delay:0s}.floating-icon:nth-child(2){top:20%;right:15%;animation-delay:1s;animation-duration:12s}.floating-icon:nth-child(3){bottom:15%;left:20%;animation-delay:2s;animation-duration:14s}.floating-icon:nth-child(4){bottom:25%;right:10%;animation-delay:3s;animation-duration:11s}.floating-icon:nth-child(5){top:50%;left:5%;animation-delay:4s;animation-duration:13s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-30px) rotate(10deg)}66%{transform:translateY(30px) rotate(-10deg)}}@media (max-width: 768px){.error-code{font-size:6rem}.error-icon{font-size:3.5rem}.error-title{font-size:2rem}.error-description{font-size:1rem}.error-actions{flex-direction:column}.btn{width:100%}.error-fact{flex-direction:column;text-align:center}.floating-icon{font-size:2rem}}