/* Mayoq — ichki ekranlar: bosh sahifa, yo'l xaritasi, natijalar, profil, test boshlash va natijasi, xato sahifalari (maket: design/mobil/screens). */

/* ---------- xato sahifalari ---------- */
.s-error { padding: 0; overflow: hidden; height: 100vh; height: 100dvh; min-height: 560px; }
.er-art { position: absolute; left: 0; right: 0; top: 0; height: 62%; display: flex; align-items: center; justify-content: center; }
.er-ring { position: absolute; left: 50%; top: 44%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .85); animation: m-ring .9s ease-out both; }
.er-ring.r1 { --s: calc(var(--u) * 320); }
.er-ring.r2 { --s: calc(var(--u) * 230); border-style: solid; border-color: rgba(255, 255, 255, .6); }
.er-lh { position: relative; margin-top: calc(var(--u) * -30); width: calc(var(--u) * 240); animation: m-rise-lh2 1.4s cubic-bezier(.22, .8, .24, 1) .1s both; }
.er-lh img { display: block; width: 100%; }
.er-chip { position: absolute; left: 50%; top: 58%; margin-left: calc(var(--u) * 50); width: 64px; height: 64px; border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 24px -12px rgba(60, 40, 150, .5); display: flex; align-items: center; justify-content: center; color: #C2372B; animation: m-pop .7s cubic-bezier(.2, .9, .3, 1.15) .7s both; }
.er-chip .ico { width: 34px; height: 34px; stroke-width: 2; }
.er-ava { position: relative; width: 176px; height: 176px; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 20px 40px -20px rgba(60, 40, 150, .6); }
.er-ava .avt, .er-ava .avt-fb { width: 176px !important; height: 176px !important; }
.er-badge { position: absolute; right: -22px; bottom: -4px; width: 62px; height: 62px; border-radius: 20px; background: #fff; box-shadow: 0 12px 24px -12px rgba(60, 40, 150, .55); display: flex; align-items: center; justify-content: center; color: #6C3FE0; }
.er-badge .ico { width: 32px; height: 32px; }
.er-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 24px calc(26px + env(safe-area-inset-bottom)); border-radius: 36px 36px 0 0; background: linear-gradient(180deg, rgba(246, 244, 255, .96) 0%, rgba(236, 233, 252, .99) 100%); box-shadow: 0 -18px 40px -20px rgba(60, 40, 150, .45), inset 0 1px 0 rgba(255, 255, 255, .95); display: flex; flex-direction: column; gap: 10px; animation: m-sheet .7s cubic-bezier(.2, .9, .3, 1.05) .3s both; }
.er-sheet h1 { margin: 0; text-align: center; font-size: 27px; font-weight: 900; color: var(--ink-3); }
.er-sheet p { margin: 0 0 12px; text-align: center; font-size: 16px; line-height: 1.4; font-weight: 500; color: #3A3970; }
.er-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px !important; font-size: 14px !important; }
.er-note .ico { width: 18px; height: 18px; stroke: #1FA34A; }