/* ===== GDCC Sci-Fi Theme (logo blue) ===== */
    :root{
      --bg0:#05070d;
      --bg1:#070b14;

      /* GDCC blues (from your logo) */
      --brand:  #0B519D;  /* primary */
      --brand2: #1B7EE9;  /* glow/highlight */
      --brand3: #073364;  /* deep */

      --txt:   rgba(235, 245, 255, .92);
      --muted: rgba(235, 245, 255, .65);
      --danger:#ff4d6d;

      /* ===== NEW: network colors ===== */
      --netDot: rgba(27,126,233,.85);
      --netLine: rgba(11,81,157,.55);
    }

    *{ box-sizing:border-box; }

    html, body{
      height:100%;
      overflow-x:hidden;
    }

    body{
      margin:0;
      min-height:100vh;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      color:var(--txt);
      background:
        radial-gradient(1200px 700px at 20% 20%, rgba(11,81,157,.20), transparent 55%),
        radial-gradient(900px 600px at 80% 30%, rgba(27,126,233,.14), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
    }

    .neo-wrap{
      position:relative;
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:40px 16px;
      overflow:hidden;
    }

    /* ===== Background layers are FIXED so they don't create page overflow ===== */
    .stars{
      position:fixed;
      inset:0;
      z-index:0;
      background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.6) 50%, transparent 52%),
        radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.45) 50%, transparent 52%),
        radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.55) 50%, transparent 52%),
        radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.4) 50%, transparent 52%),
        radial-gradient(2px 2px at 40% 45%, rgba(255,255,255,.35) 50%, transparent 52%);
      background-size: 420px 420px;
      opacity:.55;
      filter: blur(.1px);
      animation: drift 14s linear infinite;
      pointer-events:none;
    }

    @keyframes drift{
      from{ transform:translate3d(0,0,0); }
      to{ transform:translate3d(-80px,40px,0); }
    }

    .grid{
      position:fixed;
      inset:0;
      z-index:0;
      background:
        linear-gradient(to right, rgba(27,126,233,.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11,81,157,.08) 1px, transparent 1px);
      background-size: 60px 60px;
      transform: perspective(900px) rotateX(58deg) translateY(20%);
      transform-origin: center;
      opacity:.35;
      mask-image: radial-gradient(circle at 50% 65%, black 0%, black 35%, transparent 72%);
      pointer-events:none;
    }

    /* ===== NEW: Particle network canvas layer ===== */
   .net{
  position:fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  display:block;        /* important */
  z-index:1;            /* above stars/grid */
  pointer-events:none;
  opacity:1;            /* make sure it's not faded away */
  /* remove blend mode until it's confirmed working */
  /* mix-blend-mode: screen; */
}

    /* If you ever want it *below* the grid, set z-index:0 and grid to 1 */
    /* ===== END NEW ===== */

    .neo-shell{
      position:relative;
      width:100%;
      max-width:530px;
      z-index:2;
    }

    .neo-card{
      position:relative;
      padding:26px 22px 18px;
      border-radius:18px;
      background: linear-gradient(180deg, rgba(12,18,35,.62), rgba(8,12,24,.52));
      border:1px solid rgba(11, 81, 157, .22);
      box-shadow:
        0 0 0 1px rgba(27, 126, 233, .10) inset,
        0 24px 70px rgba(0,0,0,.6),
        0 0 28px rgba(11, 81, 157, .18);
      backdrop-filter: blur(10px);
      overflow:hidden;
    }

    .neo-header{
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:10px;
    }
    .neo-header h1{
      margin:0;
      font-size:14px;
      letter-spacing:.22em;
      text-transform:uppercase;
      color: rgba(235,245,255,.95);
    }
    .neo-header p{
      margin:4px 0 0;
      font-size:12px;
      color:var(--muted);
    }

    .sigil{
      width:72px;
      height:72px;
      border-radius:12px;
      display:grid;
      place-items:center;
      border:1px solid rgba(27,126,233,.22);
      background: transparent;
      box-shadow: 0 0 18px rgba(27,126,233,.12);
      overflow:hidden;
      flex: 0 0 auto;
    }
    .sigil img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      padding:3px;
    }

    .neo-divider{
      height:1px;
      width:100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(27,126,233,.45),
        rgba(11,81,157,.30),
        transparent
      );
      margin:14px 0 18px;
    }

    form p{ margin:0 0 14px; }

    form label{
      display:block;
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(235,245,255,.78);
      margin:0 0 8px;
    }

    form input, form select, form textarea{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid rgba(11,81,157,.22);
      background: rgba(5, 8, 16, .55);
      color: var(--txt);
      outline:none;
      box-shadow: 0 0 0 1px rgba(27,126,233,.08) inset;
      transition: border-color .2s ease, box-shadow .2s ease, transform .05s ease;
    }

    form input::placeholder{ color: rgba(235,245,255,.35); }

    form input:focus, form select:focus, form textarea:focus{
      border-color: rgba(27, 126, 233, .75);
      box-shadow:
        0 0 0 4px rgba(27, 126, 233, .14),
        0 0 0 1px rgba(11, 81, 157, .18) inset;
    }

    .errorlist{
      margin:8px 0 0;
      padding:10px 12px;
      border-radius:12px;
      list-style:none;
      background: rgba(255, 77, 109, .10);
      border:1px solid rgba(255, 77, 109, .28);
      color: rgba(255, 220, 230, .95);
      font-size:12px;
    }

    .btn.btn-brand{
      appearance:none;
      border:0;
      cursor:pointer;
      padding:12px 14px;
      border-radius:12px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#031423;
      background: linear-gradient(90deg, var(--brand), var(--brand2));
      box-shadow:
        0 10px 28px rgba(27,126,233,.18),
        0 10px 28px rgba(11,81,157,.14);
      position:relative;
      overflow:hidden;
    }

    .btn.btn-brand::after{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.45), transparent 45%);
      opacity:0;
      transition: opacity .2s ease;
    }

    .btn.btn-brand:hover::after{ opacity:.65; }
    .btn.btn-brand:active{ transform: translateY(1px); }

    .w-100{ width:100%; }

    .helptext a{
        color: white;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
        font-size: small;
        text-decoration: none;
        display: flex;
        justify-content: flex-end;
    }
    
    #id_remember {
  	display: none;
    }

    label[for="id_remember"] {
        display: none;
    }

    .neo-footer{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:14px;
      color: rgba(235,245,255,.55);
    }
    .neo-footer small{ font-size:11px; letter-spacing:.08em; }
    .dot{
      width:8px; height:8px; border-radius:999px;
      background: rgba(27,126,233,.95);
      box-shadow: 0 0 10px rgba(27,126,233,.55);
    }

    /* ===== NEW: accessibility (optional) ===== */
    /*@media (prefers-reduced-motion: reduce){
      .stars{ animation:none; }
      .net{ display:none; }
    }*/