:root
{

    --zen-404-bg: #f8f9fb;

    --zen-404-text: #111827;

    --zen-404-muted: #6b7280;

    --zen-404-border: #e5e7eb;

    --zen-404-primary: #4c7188;

    --zen-404-primary-hover: #4c7188;

}

#zen_progress
{
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #4c7188, #4c7188);
    z-index: 99999;
    opacity: 1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
    pointer-events: none;
}

@keyframes zenFadeIn
{
    from
    {
        opacity: 0;
        transform: translateY(8px);
    }

    to
    {
        opacity: 1;
        transform: translateY(0);
    }
}

.zen-fade-in
{
    animation: zenFadeIn 0.25s ease;
}

body#zen-404
{

    margin: 0;

    width: 100%;

    min-height: 100vh;

    background: var(--zen-404-bg);

    color: var(--zen-404-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

}


body#zen-404 #zen
{

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    box-sizing: border-box;

}


body#zen-404 .zen-404
{

    width: 100%;

    max-width: 560px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 30px;

    box-sizing: border-box;

}


body#zen-404 .zen-404-icon
{

    margin: 0 0 8px;

    color: var(--zen-404-text);

    font-size: 92px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -7px;

}


body#zen-404 .zen-404 h1
{

    margin: 0 0 14px;

    color: var(--zen-404-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.6px;

}


body#zen-404 .zen-404 p
{

    width: 100%;

    max-width: 430px;

    margin: 0 0 24px;

    color: var(--zen-404-muted);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;

}


body#zen-404 .zen-404-path
{

    max-width: 100%;

    margin: 0 0 24px;

    padding: 8px 13px;

    box-sizing: border-box;

    border: 1px solid var(--zen-404-border);

    border-radius: 8px;

    background: #ffffff;

    color: #7b8190;

    font-family:
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 11px;

    line-height: 1.5;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


body#zen-404 .zen-404-btn
{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 120px;

    min-height: 42px;

    padding: 0 20px;

    box-sizing: border-box;

    border: 1px solid var(--zen-404-primary);

    border-radius: 9px;

    background: var(--zen-404-primary);

    color: #ffffff;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;

}


body#zen-404 .zen-404-btn:hover
{

    background: var(--zen-404-primary-hover);

    border-color: var(--zen-404-primary-hover);

    transform: translateY ( -1px );

    box-shadow:
        0 8px 20px rgba ( 99, 91, 255, .18 );

}


body#zen-404 .zen-404-btn:active
{

    transform: translateY ( 0 );

    box-shadow: none;

}


@media ( max-width: 600px )
{

    body#zen-404 #zen
    {

        padding: 24px;

    }


    body#zen-404 .zen-404
    {

        padding: 20px;

    }


    body#zen-404 .zen-404-icon
    {

        font-size: 72px;

        letter-spacing: -5px;

    }


    body#zen-404 .zen-404 h1
    {

        font-size: 21px;

    }


    body#zen-404 .zen-404 p
    {

        font-size: 13px;

    }


}