* { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #000; overflow: hidden; font-family: 'VT323', monospace; }

    .login-container { min-height: 100vh; background: #1a0f00; color: #ffb000; position: relative; overflow: hidden; }
    .login-container::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
      pointer-events: none; z-index: 2; animation: scanlines 8s linear infinite;
    }
    @keyframes scanlines { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } }
    .login-container::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.7) 100%);
      pointer-events: none; z-index: 1;
    }

    .banner { background: linear-gradient(180deg, #ffaa00 0%, #cc7700 100%); padding: 15px 20px; text-align: center;
      box-shadow: 0 4px 20px rgba(255,170,0,0.4); border-bottom: 2px solid #ffaa00; position: relative; z-index: 3; }
    .banner h1 { font-size: 28px; color: #2a1a00; letter-spacing: 3px; margin: 0; font-weight: 400; }

    .login-content { display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: calc(100vh - 80px); position: relative; z-index: 3; padding: 20px; }

.aperture-logo {
  font-family: monospace;    /* pure monospace, ensures fallback is consistent */
  font-size: 18px;           /* adjust until proportions look right */
  line-height: 1;            /* important: no extra vertical spacing */
  white-space: pre;          /* preserve spacing exactly */
  display: inline-block;     /* prevents unexpected width scaling */
}

    .login-form { max-width: 500px; width: 100%; }

    .form-group { margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
    .form-label { font-size: 24px; color: #ffaa00; text-shadow: 0 0 8px rgba(255,170,0,0.8);
      min-width: 120px; background: rgba(255,170,0,0.1); padding: 8px 15px; border: 1px solid #ffaa00; }
    .form-input {
      flex: 1; background: rgba(255,176,0,0.05); border: 1px solid #ffaa00;
      padding: 8px 15px; font-family: 'VT323', monospace; font-size: 24px; color: #ffb000;
      text-shadow: 0 0 8px rgba(255,176,0,0.8); outline: none; transition: all 0.3s ease;
    }
    .form-input:disabled { background: rgba(255,176,0,0.05); cursor: default; }

    .processing-message { font-size: 22px; color: #ffaa00; text-shadow: 0 0 8px rgba(255,170,0,0.8);
      margin-top: 30px; text-align: left; width: 100%; max-width: 500px; }
    .processing-message::after { content: '█'; animation: blink 1s step-end infinite; margin-left: 5px; }

    .error-message { font-size: 22px; color: #ff4444; text-shadow: 0 0 8px rgba(255,68,68,0.8);
      margin-top: 20px; text-align: left; width: 100%; max-width: 500px; }
    @keyframes blink { 0%,50% { opacity: 1; } 50.1%,100% { opacity: 0; } }

    .crt-effect { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
                  linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
      background-size: 100% 2px, 3px 100%; pointer-events: none; z-index: 4; }

    @media (max-width: 768px) {
      .banner h1 { font-size: 18px; letter-spacing: 1px; }
      .aperture-logo { font-size: 10px; margin-bottom: 30px; }
      .form-group { flex-direction: column; align-items: stretch; gap: 5px; }
      .form-label { font-size: 20px; min-width: auto; }
      .form-input { font-size: 20px; }
      .processing-message, .error-message { font-size: 18px; }
    }