@import '_content/GlobalEdTech.Web.Shared/GlobalEdTech.Web.Shared.bundle.scp.css';

/* /Pages/NotFoundPage.razor.rz.scp.css */
.sf-404-stage[b-8qc3ci8xjg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 80px;
    position: relative;
    overflow: hidden;
}
.sf-404[b-8qc3ci8xjg] {
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}
[b-8qc3ci8xjg] .sf-404__copy { min-width: 0; }
[b-8qc3ci8xjg] .sf-404__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    padding: 5px 12px 5px 9px;
}
[b-8qc3ci8xjg] .sf-404__dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: #d97706;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.16);
}
[b-8qc3ci8xjg] .sf-404__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 38px; line-height: 1.05; font-weight: 700;
    letter-spacing: -0.6px; color: #334155;
    margin: 18px 0 12px; text-wrap: balance;
}
[b-8qc3ci8xjg] .sf-404__sub {
    font-size: 14px; line-height: 1.55; color: #475569;
    max-width: 44ch; text-wrap: pretty;
}
[b-8qc3ci8xjg] .sf-404__url-line {
    margin-top: 18px; display: flex; align-items: center;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
    padding: 6px 6px 6px 12px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12px; color: #475569; overflow: hidden; max-width: 460px;
}
[b-8qc3ci8xjg] .sf-404__url-method { font-weight: 600; color: #334155; margin-right: 8px; }
[b-8qc3ci8xjg] .sf-404__url-path { color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
[b-8qc3ci8xjg] .sf-404__url-status {
    margin-left: 8px; flex-shrink: 0; background: #fef2f2; color: #dc2626;
    border-radius: 6px; padding: 3px 8px; font-weight: 700; letter-spacing: 0.3px;
}
[b-8qc3ci8xjg] .sf-404__actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
[b-8qc3ci8xjg] .sf-404__btn-primary {
    height: 34px; padding: 0 16px; border-radius: 8px;
    font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 12px;
    background: #475569; color: #fff; border: 1px solid transparent;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(15,23,42,0.08);
    transition: background 0.12s;
}
[b-8qc3ci8xjg] .sf-404__btn-primary:hover { background: #334155; }

[b-8qc3ci8xjg] .sf-404__visual {
    position: relative; width: 100%; aspect-ratio: 1 / 0.85; max-width: 420px; justify-self: end;
}
[b-8qc3ci8xjg] .sf-404__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(100,116,139,0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(100,116,139,0.10) 1px, transparent 1px);
    background-size: 40px 40px; border-radius: 16px;
    mask-image: radial-gradient(ellipse at center, #000 50%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 85%);
}
[b-8qc3ci8xjg] .sf-404__num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'DM Sans', sans-serif; font-weight: 700; color: #334155;
    font-size: clamp(140px, 22vw, 220px); line-height: 1; letter-spacing: -8px; user-select: none;
}
[b-8qc3ci8xjg] .sf-404__digit { display: inline-block; }
[b-8qc3ci8xjg] .sf-404__digit--zero { position: relative; color: transparent; }
[b-8qc3ci8xjg] .sf-404__digit--zero::before {
    content: ""; position: absolute; inset: 14% 12%; border-radius: 50%;
    border: 14px solid #334155; box-sizing: border-box;
}
[b-8qc3ci8xjg] .sf-404__floater {
    position: absolute; border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15,23,42,0.14), 0 2px 4px rgba(15,23,42,0.08);
    will-change: transform; transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
[b-8qc3ci8xjg] .sf-404__floater--1 { width: 40px; height: 40px; background: #059669; top: 6%; left: 8%; border-radius: 10px; animation: sf404bob1-b-8qc3ci8xjg 4.8s ease-in-out infinite; }
[b-8qc3ci8xjg] .sf-404__floater--2 { width: 28px; height: 28px; background: #7c3aed; top: 16%; right: 10%; border-radius: 999px; animation: sf404bob2-b-8qc3ci8xjg 5.4s ease-in-out infinite; }
[b-8qc3ci8xjg] .sf-404__floater--3 { width: 22px; height: 22px; background: #d97706; bottom: 18%; left: 4%; border-radius: 4px; transform: rotate(12deg); animation: sf404bob3-b-8qc3ci8xjg 6.1s ease-in-out infinite; }
[b-8qc3ci8xjg] .sf-404__floater--4 { width: 34px; height: 34px; background: #dc2626; bottom: 8%; right: 14%; border-radius: 10px; transform: rotate(-8deg); animation: sf404bob4-b-8qc3ci8xjg 5.2s ease-in-out infinite; }
[b-8qc3ci8xjg] .sf-404__floater--5 { width: 16px; height: 16px; background: #0891b2; top: 42%; left: -2%; border-radius: 999px; animation: sf404bob5-b-8qc3ci8xjg 4.2s ease-in-out infinite; }
[b-8qc3ci8xjg] .sf-404__floater--6 { width: 18px; height: 18px; background: #2563eb; top: 50%; right: -2%; border-radius: 4px; transform: rotate(20deg); animation: sf404bob6-b-8qc3ci8xjg 4.6s ease-in-out infinite; }
[b-8qc3ci8xjg] .sf-404__missing-tag {
    position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%) rotate(-3deg);
    background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-radius: 8px; padding: 8px 14px 8px 10px;
    display: flex; align-items: center; gap: 10px; font-size: 12px;
}
[b-8qc3ci8xjg] .sf-404__missing-swatch { width: 14px; height: 14px; border-radius: 4px; background: #d97706; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
[b-8qc3ci8xjg] .sf-404__missing-label { color: #334155; font-weight: 600; }
[b-8qc3ci8xjg] .sf-404__missing-meta { color: #475569; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; }

@keyframes sf404bob1-b-8qc3ci8xjg { 0%,100% { transform: translateY(0) rotate(0) }    50% { transform: translateY(-10px) rotate(6deg) } }
@keyframes sf404bob2-b-8qc3ci8xjg { 0%,100% { transform: translateY(0) }               50% { transform: translateY(8px) } }
@keyframes sf404bob3-b-8qc3ci8xjg { 0%,100% { transform: translateY(0) rotate(12deg) } 50% { transform: translateY(-6px) rotate(20deg) } }
@keyframes sf404bob4-b-8qc3ci8xjg { 0%,100% { transform: translateY(0) rotate(-8deg) } 50% { transform: translateY(-12px) rotate(-2deg) } }
@keyframes sf404bob5-b-8qc3ci8xjg { 0%,100% { transform: translateY(0) translateX(0) } 50% { transform: translateY(-6px) translateX(4px) } }
@keyframes sf404bob6-b-8qc3ci8xjg { 0%,100% { transform: translateY(0) rotate(20deg) } 50% { transform: translateY(8px) rotate(28deg) } }

@media (max-width: 880px) {
    .sf-404[b-8qc3ci8xjg] { grid-template-columns: 1fr; gap: 32px; }
    [b-8qc3ci8xjg] .sf-404__visual { justify-self: start; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
    [b-8qc3ci8xjg] .sf-404__floater { animation: none !important; }
}