/* WEB PANEL PROXY public CSS */
:root {
      --bg: #09090f;
      --text: #f5f5f7;
      --muted: #85859a;
      --accent: #8b7cf8;
      --accent-light: #b4aaff;
      --border: rgba(255, 255, 255, 0.08);
    }

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

    body {
      min-height: 100vh;
      min-height: 100dvh;
      background: var(--bg);
      color: var(--text);
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        Roboto,
        sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    /* Background glow */

    body::before {
      content: "";
      position: absolute;
      width: 650px;
      height: 650px;
      background: radial-gradient(
        circle,
        rgba(114, 91, 255, 0.13) 0%,
        rgba(114, 91, 255, 0.04) 40%,
        transparent 70%
      );
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      pointer-events: none;
    }

    /* Grid background */

    .grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(
          rgba(255, 255, 255, 0.018) 1px,
          transparent 1px
        ),
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.018) 1px,
          transparent 1px
        );
      background-size: 48px 48px;
      mask-image: radial-gradient(
        ellipse at center,
        black 10%,
        transparent 75%
      );
      pointer-events: none;
    }

    .container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 650px;
      padding: 40px 24px;
      text-align: center;
      animation: fadeIn 0.9s ease-out both;
    }

    /* Status badge */

    .status {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      border: 1px solid var(--border);
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.025);
      color: #b2b2c1;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.5px;
      margin-bottom: 32px;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f5ad60;
      box-shadow: 0 0 12px rgba(245, 173, 96, 0.5);
      animation: pulse 2s infinite;
    }

    /* Error code */

    .error-code {
      font-size: clamp(110px, 24vw, 190px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -12px;
      background: linear-gradient(
        180deg,
        #ffffff 10%,
        #a79cff 55%,
        #5142a0 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      user-select: none;
      margin-bottom: 20px;
    }

    /* Content */

    h1 {
      font-size: clamp(24px, 5vw, 34px);
      font-weight: 650;
      letter-spacing: -1px;
      margin-bottom: 18px;
    }

    .description {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
      max-width: 440px;
      margin: 0 auto;
    }

    .description span {
      color: #c0b8ff;
    }

    /* Divider */

    .divider {
      width: 100%;
      max-width: 320px;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--border),
        transparent
      );
      margin: 38px auto;
    }

    /* Loading animation */

    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 7px;
      margin-bottom: 20px;
    }

    .loading span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: loading 1.3s infinite ease-in-out;
    }

    .loading span:nth-child(2) {
      animation-delay: 0.15s;
    }

    .loading span:nth-child(3) {
      animation-delay: 0.3s;
    }

    .loading-text {
      color: #646477;
      font-size: 12px;
      letter-spacing: 0.3px;
    }

    /* Footer */

    footer {
      position: absolute;
      bottom: 28px;
      width: 100%;
      text-align: center;
      font-size: 11px;
      color: #474757;
      letter-spacing: 0.4px;
    }

    /* Animations */

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

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

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.5;
        transform: scale(0.8);
      }
    }

    @keyframes loading {
      0%, 60%, 100% {
        opacity: 0.25;
        transform: translateY(0);
      }

      30% {
        opacity: 1;
        transform: translateY(-5px);
      }
    }

    /* Mobile */

    @media (max-width: 480px) {
      .container {
        padding: 24px;
      }

      .error-code {
        letter-spacing: -7px;
      }

      .description {
        font-size: 14px;
      }

      .divider {
        margin: 30px auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation: none !important;
      }
    }