/* WEB PANEL PROXY public CSS */
:root {
      --bg: #0b1020;
      --card: rgba(14, 16, 40, 0.85);
      --text: #e8eaf6;
      --muted: #b8c0e0;
      --accent: #7c8aff;
      --border: rgba(124, 138, 255, 0.25);
    }

    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color: var(--text);
      background: #0b1020;
      overflow: hidden; /* чтобы виджет частиц не выходил за пределы экрана */
    }

    /* Анимированное фоновое полотно через canvas */
    canvas#bgCanvas {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      display: block;
    }

    .wrap {
      position: relative;
      z-index: 1;
      min-height: 100%;
      display: grid;
      place-items: center;
      padding: 2rem;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 2rem;
      max-width: 520px;
      width: 100%;
      box-shadow: 0 20px 40px rgba(0,0,0,0.4);
      text-align: center;
    }

    h1 { margin: 0 0 0.5rem; font-size: 2rem; }
    p { color: var(--muted); margin: 0 0 1rem; }

    form { display: grid; gap: 0.75rem; grid-template-columns: 1fr auto; align-items: center; justify-content: center; }
    input[type="email"] {
      padding: 0.75rem 1rem;
      border-radius: 6px;
      border: 1px solid #2b366b;
      background: rgba(255,255,255,0.04);
      color: #fff;
      min-width: 0;
    }
    button {
      padding: 0.75rem 1rem;
      border-radius: 6px;
      border: none;
      background: var(--accent);
      color: #fff;
      cursor: pointer;
      font-weight: 600;
    }
    #msg { margin-top: 0.5rem; min-height: 1.25em; color: #a5ffbf; }

    @media (max-width: 600px) {
      form { grid-template-columns: 1fr; }
    }

    /* маленький трюк, чтобы контент не заслонял частоты фона */
    .shadowFade {
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 50% 0%, rgba(124,138,255,.15), transparent 60%);
      mix-blend-mode: screen;
      z-index: 0;
    }