:root{
    --bg-main:#020617;
    --accent:#38bdf8;
    --accent-soft:rgba(56,189,248,.18);
    --accent-strong:rgba(56,189,248,.8);
    --text-main:#e5e7eb;
    --text-muted:#9ca3af;
    --card-bg:rgba(15,23,42,.92);
    --border-soft:rgba(148,163,184,.28);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background: radial-gradient(circle at 0% 0%, #020617 0, #020617 40%, #000 100%);
    color:var(--text-main);
    overflow:hidden;
}

/* ===== Фон ===== */

.bg-grid{
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(to right, rgba(15,23,42,.55) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,.55) 1px, transparent 1px);
    background-size:40px 40px;
    opacity:.35;
    pointer-events:none;
}

.bg-glow{
    position:fixed;
    width:520px;
    height:520px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(56,189,248,.38), transparent 70%);
    filter:blur(26px);
    opacity:.45;
    pointer-events:none;
    animation:glow-move 18s ease-in-out infinite alternate;
}

.bg-glow.glow-2{
    width:420px;
    height:420px;
    background:radial-gradient(circle, rgba(37,99,235,.5), transparent 70%);
    bottom:-140px;
    right:-40px;
    left:auto;
    top:auto;
    animation-duration:22s;
}

@keyframes glow-move{
    0%{
        transform:translate3d(-140px,-120px,0) scale(1);
    }
    100%{
        transform:translate3d(60px,40px,0) scale(1.06);
    }
}

/* noise */

.bg-noise{
    position:fixed;
    inset:-20px;
    pointer-events:none;
    opacity:.10;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    mix-blend-mode:soft-light;
}

/* Літаючі частинки – тепер стартують знизу і більш м’які */

.particle{
    position:fixed;
    top:100vh;              /* базова позиція нижче екрана */
    width:3px;
    height:3px;
    background:#22d3ee;
    border-radius:50%;
    box-shadow:0 0 6px rgba(34,211,238,.8);
    opacity:.2;
    pointer-events:none;
    animation:particleFloat linear infinite;
}

@keyframes particleFloat{
    from{
        transform:translateY(0);          /* старт під екраном */
        opacity:.0;
    }
    15%{
        opacity:.35;
    }
    85%{
        opacity:.35;
    }
    to{
        transform:translateY(-120vh);     /* пролітає увесь екран вверх */
        opacity:0;
    }
}

/* ===== Card ===== */

.error-shell{
    position:relative;
    z-index:2;
    width:100%;
    max-width:520px;
    padding:24px;
    perspective:1200px;
}

.error-card{
    position:relative;
    border-radius:24px;
    padding:32px 28px 26px;
    background:
        radial-gradient(circle at 0 0, rgba(56,189,248,.12), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(129,140,248,.08), transparent 50%),
        var(--card-bg);
    border:1px solid var(--border-soft);
    box-shadow:
        0 18px 60px rgba(15,23,42,.85),
        0 0 0 1px rgba(15,23,42,.7);
    backdrop-filter:blur(18px);
    animation:card-in .6s ease-out;
    transform-style:preserve-3d;
    transition:transform .18s ease-out, box-shadow .18s ease-out;
    z-index:0;
}

/* Неонова рамка – зроблена м’якшою */

.error-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(
        120deg,
        rgba(56,189,248,.7),
        rgba(129,140,248,.7),
        rgba(45,212,191,.7),
        rgba(56,189,248,.7)
    );
    background-size:260% 260%;
    opacity:.22;
    z-index:-1;
    filter:blur(.6px);
    animation:neonFlow 9s linear infinite;
}

@keyframes neonFlow{
    0%{
        background-position:0% 50%;
        opacity:.18;
    }
    50%{
        background-position:100% 50%;
        opacity:.32;
    }
    100%{
        background-position:0% 50%;
        opacity:.18;
    }
}

@keyframes card-in{
    0%{
        opacity:0;
        transform:translateY(16px) scale(.97);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* ===== Badge ===== */

.error-badge{
    position:absolute;
    top:16px;
    right:18px;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    background:rgba(15,23,42,.9);
    border:1px solid rgba(148,163,184,.4);
    color:var(--text-muted);
    display:flex;
    align-items:center;
    gap:6px;
}

.error-badge-dot{
    width:6px;
    height:6px;
    border-radius:999px;
    background:var(--accent-strong);
    box-shadow:0 0 6px var(--accent-strong);
}

/* ===== Header ===== */

.error-header{
    display:flex;
    gap:16px;
    margin-bottom:20px;
}

.error-icon{
    width:42px;
    height:42px;
    border-radius:16px;
    background:radial-gradient(circle at 30% 20%, #f9fafb, #38bdf8);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:20px;
    color:#0b1120;
    box-shadow:0 0 14px rgba(56,189,248,.7);
}

.error-head-text{
    flex:1;
}

.error-code{
    font-size:14px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent-soft);
    margin-bottom:4px;
}

.error-title{
    font-size:22px;
    font-weight:600;
    margin-bottom:4px;
}

.error-sub{
    font-size:14px;
    color:var(--text-muted);
}

/* ===== Body ===== */

.error-body{
    margin:18px 0 22px;
    font-size:14px;
    color:var(--text-muted);
    line-height:1.6;
}

/* ===== Buttons ===== */

.error-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:space-between;
    align-items:center;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 18px;
    border-radius:999px;
    font-size:14px;
    border:none;
    cursor:pointer;
    text-decoration:none;
    transition:.16s ease;
}

.btn-primary{
    background:linear-gradient(135deg,#0ea5e9,#0369a1);
    color:#e5f3ff;
    font-weight:600;
    box-shadow:
        0 0 14px rgba(14,165,233,.55),
        0 0 22px rgba(15,23,42,.8);
}

.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:
        0 0 20px rgba(14,165,233,.85),
        0 0 30px rgba(15,23,42,.9);
}

.btn-ghost{
    background:rgba(15,23,42,.86);
    color:var(--text-muted);
    border:1px solid rgba(148,163,184,.5);
}

.btn-ghost:hover{
    border-color:var(--accent);
    color:var(--text-main);
}

.hint{
    margin-top:12px;
    font-size:12px;
    color:var(--text-muted);
}

/* ===== Mobile ===== */

@media (max-width:480px){

    .error-card{
        padding:26px 18px 22px;
        border-radius:18px;
    }

    .error-title{
        font-size:19px;
    }

    .error-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .btn{
        width:100%;
    }
}