<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>RGB // AUTH TERMINAL</title>

  <style>
    :root{
      --bg: #050a06;
      --bg2: #06140b;
      --phosphor: #6dff8f;
      --phosphor-dim: rgba(109,255,143,.65);
      --phosphor-faint: rgba(109,255,143,.35);
      --danger: #ff5a6a;
      --frame: rgba(109,255,143,.22);
      --glass: rgba(255,255,255,.03);
    }

    *{ box-sizing: border-box; }
    body{
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 28px 14px;
      background:
        radial-gradient(1200px 800px at 50% 20%, rgba(109,255,143,.12), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      color: var(--phosphor);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    /* CRT vignette + scanlines */
    .crt{
      width: min(980px, 100%);
      position: relative;
      padding: 26px;
      border-radius: 18px;
      border: 1px solid var(--frame);
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      box-shadow:
        0 20px 70px rgba(0,0,0,.6),
        inset 0 0 0 1px rgba(0,0,0,.35);
      overflow: hidden;
    }

    .crt::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(0,0,0,.00),
          rgba(0,0,0,.00) 2px,
          rgba(0,0,0,.12) 3px
        );
      mix-blend-mode: multiply;
      opacity: .55;
    }

    .crt::after{
      content:"";
      position:absolute;
      inset:-20%;
      pointer-events:none;
      background: radial-gradient(circle at 50% 35%, rgba(109,255,143,.12), transparent 55%);
      filter: blur(2px);
      opacity: .9;
    }

    .inner{
      position: relative;
      display: grid;
      gap: 14px;
    }

    .header{
      display: grid;
      gap: 8px;
      padding-bottom: 12px;
      border-bottom: 1px dashed rgba(109,255,143,.35);
    }

    .brand{
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-wrap: wrap;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 800;
    }

    .brand .badge{
      display: inline-block;
      padding: 4px 8px;
      border: 1px solid rgba(109,255,143,.35);
      border-radius: 10px;
      background: rgba(109,255,143,.05);
      font-size: 11px;
    }

    .brand h1{
      margin: 0;
      font-size: 16px;
    }

    .sub{
      margin: 0;
      color: var(--phosphor-dim);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.35;
    }

    .prompt{
      margin-top: 4px;
      color: var(--phosphor);
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
      line-height: 1.6;
      white-space: pre-wrap;
    }

    .line{
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .caret{
      display: inline-block;
      width: 10px;
      height: 16px;
      margin-left: 2px;
      background: var(--phosphor);
      opacity: .85;
      animation: blink 1s steps(1, end) infinite;
      vertical-align: -2px;
    }
    @keyframes blink { 50% { opacity: 0; } }

    form{
      display: grid;
      gap: 12px;
      padding-top: 8px;
    }

    .field{
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 10px;
      align-items: center;
    }

    .label{
      color: var(--phosphor-dim);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 12px;
    }

    input[type="text"],
    input[type="password"]{
      width: 100%;
      background: rgba(0,0,0,.45);
      border: 1px solid rgba(109,255,143,.35);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--phosphor);
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    input::placeholder{
      color: var(--phosphor-faint);
      text-transform: uppercase;
      letter-spacing: .10em;
    }

    input:focus{
      border-color: rgba(109,255,143,.7);
      box-shadow:
        0 0 0 3px rgba(109,255,143,.12),
        inset 0 0 0 1px rgba(0,0,0,.35);
    }

    .actions{
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    button{
      appearance: none;
      border: 1px solid rgba(109,255,143,.55);
      background: rgba(109,255,143,.08);
      color: var(--phosphor);
      border-radius: 12px;
      padding: 10px 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      cursor: pointer;
    }
    button:hover{
      background: rgba(109,255,143,.14);
    }
    button:active{
      transform: translateY(1px);
    }

    .hint{
      color: var(--phosphor-dim);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.35;
      border: 1px dashed rgba(109,255,143,.25);
      border-radius: 12px;
      padding: 10px 12px;
      background: rgba(0,0,0,.22);
    }

    .error{
      border: 1px solid rgba(255,90,106,.55);
      background: rgba(255,90,106,.10);
      color: #ffb3bb;
      border-radius: 12px;
      padding: 10px 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 800;
      display: grid;
      gap: 6px;
    }
    .error small{
      font-weight: 600;
      color: rgba(255,179,187,.8);
      text-transform: none;
      letter-spacing: normal;
      font-size: 12px;
      line-height: 1.35;
    }

    .footer{
      margin-top: 10px;
      padding-top: 12px;
      border-top: 1px dashed rgba(109,255,143,.35);
      color: var(--phosphor-dim);
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      line-height: 1.4;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .glow{
      text-shadow:
        0 0 10px rgba(109,255,143,.35),
        0 0 28px rgba(109,255,143,.12);
    }

    @media (max-width: 720px){
      .field{ grid-template-columns: 1fr; }
      .label{ font-size: 11px; }
    }
  </style>
</head>

<body>
  <div class="crt" role="application" aria-label="Authentication terminal">
    <div class="inner glow">
      <div class="header">
        <div class="brand">
          <span class="badge">RGB</span>
          <h1>MAINFRAME ACCESS TERMINAL</h1>
          <span class="badge">REV 26.01</span>
        </div>
        <p class="sub">
          Radiant Gamut Bureau • Secure System • Unauthorized Access Prohibited
        </p>
      </div>

      <div class="prompt">
        SYSTEM READY.
        ENTER CREDENTIALS TO PROCEED.
        <span class="caret" aria-hidden="true"></span>
      </div>

      {% if error %}
        <div class="error">
          {{ error }}
        </div>
      {% endif %}

      <form method="post" action="/login" autocomplete="off">
        <input type="hidden" name="next" value="{{ next|default('/agents') }}" />

        <div class="field">
          <div class="label">USERNAME</div>
          <input
            type="text"
            name="username"
            placeholder="ENTER USERNAME"
            autocapitalize="characters"
            spellcheck="false"
            required
            autofocus
          />
        </div>

        <div class="field">
          <div class="label">PASSWORD</div>
          <input
            type="password"
            name="password"
            placeholder="ENTER PASSWORD"
            required
          />
        </div>

        <div class="actions">
          <button type="submit">AUTHENTICATE</button>
          <div class="hint">
            NOTICE: INPUT IS RECORDED FOR SECURITY PURPOSES.
          </div>
        </div>
      </form>

      <div class="footer">
        <div>CONNECTION: LOCALHOST • ENCRYPTION: PROBABLY</div>
        <div>IF YOU ARE READING THIS, YOU ARE ALREADY ON A LIST.</div>
      </div>
    </div>
  </div>
</body>
</html>