*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green:      #2d8653;
    --green-d:    #1e6b3f;
    --green-l:    #e8f5ee;
    --red:        #ef4444;
    --red-l:      #fee2e2;
    --amber:      #f59e0b;
    --amber-l:    #fef3c7;
    --g50:        #f9fafb;
    --g100:       #f3f4f6;
    --g200:       #e5e7eb;
    --g400:       #9ca3af;
    --g500:       #6b7280;
    --g700:       #374151;
    --g800:       #1f2937;
    --surface:    #ffffff;
    --font:       'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body {
    height: 100%;
    font-family: var(--font);
}

body {
    background: linear-gradient(160deg, #f7fafc 0%, #edf7f1 100%);
    color: var(--g800);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

/* Card */
.err-card {
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(17, 24, 39, .10);
    border: 1px solid var(--g200);
    padding: 56px 52px 48px;
    max-width: 520px;
    width: 100%;
    text-align: center;
    animation: slideUp .45s cubic-bezier(.22,.6,.36,1) both;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Logo */
.err-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
}
.err-logo img {
    height: 36px;
    width: auto;
}

/* Badge / label pill above the error code */
.err-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.err-badge--green { background: var(--green-l); color: var(--green); }
.err-badge--red   { background: var(--red-l);   color: var(--red);   }
.err-badge--amber { background: var(--amber-l); color: var(--amber); }

/* Error code (e.g. 404, 500) */
.err-code {
    font-size: clamp(80px, 18vw, 110px);
    font-weight: 800;
    line-height: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    letter-spacing: -4px;
}

.err-code--green {
    background-image: linear-gradient(135deg, var(--green) 0%, #16a34a 50%, #6ee7b7 100%);
}

.err-code--red {
    background-image: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.err-code--amber {
    background-image: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

/* Icon circle */
.err-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
}
.err-icon-wrap svg {
    width: 34px;
    height: 34px;
}

.err-icon--red  { background: var(--red-l); }
.err-icon--red svg  { stroke: var(--red); }

.err-icon--green { background: var(--green-l); }
.err-icon--green svg { stroke: var(--green); }

.err-icon--amber { background: var(--amber-l); }
.err-icon--amber svg { stroke: var(--amber); }

/* Text */
.err-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--g800);
    margin-bottom: 10px;
}

.err-message {
    font-size: 15px;
    color: var(--g500);
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Divider */
.err-divider {
    height: 1px;
    background: var(--g200);
    margin: 0 -8px 32px;
}

/* Buttons */
.err-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-err {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    transition: all .22s ease;
    font-family: var(--font);
    cursor: pointer;
    border: none;
}

.btn-err-primary {
    background: var(--green);
    color: #fff;
    box-shadow: 0 2px 12px rgba(45, 134, 83, .30);
}
.btn-err-primary:hover {
    background: var(--green-d);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 134, 83, .35);
    color: #fff;
    text-decoration: none;
}

.btn-err-ghost {
    background: var(--g100);
    color: var(--g700);
    border: 1px solid var(--g200);
}
.btn-err-ghost:hover {
    background: var(--g200);
    transform: translateY(-2px);
    color: var(--g800);
    text-decoration: none;
}

@media (max-width: 480px) {
    .err-card { padding: 40px 28px 36px; }
    .err-code  { font-size: 80px; }
}