.error-page {
   min-height: min(70vh, 720px);
   display: grid;
   place-items: center;
   padding: 3rem 1rem;
   background: radial-gradient(circle at 50% 0%, rgba(255, 170, 62, .12), transparent 55%);
}

.error-card {
   width: min(100%, 560px);
   padding: clamp(2rem, 5vw, 3.5rem);
   text-align: center;
   background: rgba(255, 255, 255, .96);
   border: 1px solid var(--bs-border-color, #e5e7eb);
   border-radius: 1.25rem;
   box-shadow: 0 1.5rem 4rem rgba(20, 29, 42, .12);
}

.error-mark {
   width: 4.5rem;
   height: 4.5rem;
   margin: 0 auto 1rem;
   display: grid;
   place-items: center;
   color: #c56b00;
   background: #fff3df;
   border: 1px solid #ffd394;
   border-radius: 50%;
   font-size: 1.75rem;
}

.error-code {
   color: #c56b00;
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .18em;
}

.error-card h1 {
   margin: .45rem 0 .75rem;
   color: #172033;
   font-size: clamp(1.45rem, 3vw, 2rem);
}

.error-message {
   max-width: 30rem;
   margin: 0 auto;
   color: #647084;
   line-height: 1.7;
}

.error-actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: .65rem;
   margin-top: 1.75rem;
}

.error-details {
   margin-top: 1.75rem;
   color: #7a8494;
   font-size: .82rem;
   text-align: left;
}

.error-details summary {
   cursor: pointer;
   text-align: center;
}

.error-request-id {
   display: grid;
   gap: .3rem;
   margin-top: .75rem;
   padding: .75rem;
   background: #f7f8fa;
   border-radius: .6rem;
}

.error-request-id code {
   overflow-wrap: anywhere;
   color: #4b5563;
}

@media (max-width: 480px) {
   .error-page {
      min-height: 65vh;
      padding: 1.5rem .75rem;
   }

   .error-card {
      padding: 2rem 1.25rem;
   }

   .error-actions > * {
      width: 100%;
   }
}